├── .prettierignore
├── .prettierrc
├── docs
    ├── favicon.ico
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── awsm.opt.min.css
    └── index.html
├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── node.yml
├── .gitignore
├── .eslintignore
├── .browserslistrc
├── .eslintrc.cjs
├── src
    ├── index.js
    └── tinybox.vue
├── LICENSE
├── vite.config.js
├── package.json
├── index.html
├── CONTRIBUTING.md
└── README.md


/.prettierignore:
--------------------------------------------------------------------------------
1 | dist/
2 | pnpm-lock.yaml
3 | *.min.css
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"trailingComma": "all"
4 | }
5 | 


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kytta/vue-tinybox/HEAD/docs/favicon.ico


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: kytta
2 | liberapay: kytta
3 | custom: paypal.me/NickKaramoff
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .cache
2 | /dev/**/*.js*
3 | /dev/nuxt/.nuxt/
4 | dist
5 | .idea
6 | node_modules
7 | 


--------------------------------------------------------------------------------
/docs/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kytta/vue-tinybox/HEAD/docs/favicon-16x16.png


--------------------------------------------------------------------------------
/docs/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kytta/vue-tinybox/HEAD/docs/favicon-32x32.png


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | .cache
2 | /dev/**/tinybox.js
3 | /dev/nuxt/.nuxt/
4 | dist
5 | .idea
6 | node_modules
7 | vite.config.js
8 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
 1 | >=.5%
 2 | last 2 versions
 3 | not dead
 4 | 
 5 | # Browsers minimal version for critical features
 6 | not chrome < 21     # flexbox
 7 | not edge < 16       # svg-css
 8 | not firefox < 28    # flexbox
 9 | not ie < 11         # flexbox
10 | not op_mini all     # css-fixed
11 | not safari < 7      # flexbox
12 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require("@rushstack/eslint-patch/modern-module-resolution");
 3 | 
 4 | module.exports = {
 5 | 	root: true,
 6 | 	extends: [
 7 | 		"eslint:recommended",
 8 | 		"xo/browser",
 9 | 		"plugin:vue/recommended",
10 | 		"@vue/eslint-config-prettier",
11 | 	],
12 | 	parserOptions: {
13 | 		ecmaVersion: "latest",
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 	},
18 | };
19 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import component from "./tinybox.vue";
 2 | 
 3 | // Executed by Vue.use()
 4 | const install = (Vue) => {
 5 | 	if (install.installed) return;
 6 | 	install.installed = true;
 7 | 	Vue.component(component.name, component);
 8 | };
 9 | 
10 | // Auto-install when Vue is found
11 | let GlobalVue = null;
12 | if (typeof window !== "undefined") {
13 | 	GlobalVue = window.Vue;
14 | 	// eslint-disable-next-line no-undef
15 | } else if (typeof global !== "undefined") {
16 | 	// eslint-disable-next-line no-undef
17 | 	GlobalVue = global.Vue;
18 | }
19 | 
20 | if (GlobalVue) {
21 | 	GlobalVue.use({ install });
22 | }
23 | 
24 | // To allow module use
25 | export default component;
26 | 


--------------------------------------------------------------------------------
/.github/workflows/node.yml:
--------------------------------------------------------------------------------
 1 | name: Test
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - main
 6 |   pull_request:
 7 |     branches:
 8 |       - main
 9 | jobs:
10 |   test:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - name: Checkout the repository
14 |         uses: actions/checkout@v3
15 |       - name: Install pnpm
16 |         uses: pnpm/action-setup@v2
17 |         with:
18 |           version: latest
19 |       - name: Install Node.js
20 |         uses: actions/setup-node@v3
21 |         with:
22 |           node-version: 16
23 |           cache: pnpm
24 |       - name: Install dependencies
25 |         run: pnpm install --ignore-scripts
26 |       - name: Lint
27 |         run: pnpm lint
28 |         env:
29 |           FORCE_COLOR: 2
30 |       - name: Build
31 |         run: pnpm build
32 |         env:
33 |           FORCE_COLOR: 2
34 |       - name: Check size
35 |         uses: andresz1/size-limit-action@v1
36 |         with:
37 |           github_token: ${{ secrets.GITHUB_TOKEN }}
38 |           skip_step: build
39 |         if: github.event_name == 'pull_request'
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Nikita Karamov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { resolve } from "node:path";
 2 | 
 3 | import { defineConfig } from "vite";
 4 | import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 5 | import vue from "@vitejs/plugin-vue2";
 6 | 
 7 | import autoprefixer from "autoprefixer";
 8 | 
 9 | export default defineConfig({
10 | 	build: {
11 | 		lib: {
12 | 			entry: resolve("src/index.js"),
13 | 			name: "Tinybox",
14 | 			formats: ["es", "umd"],
15 | 			// Workaround to keep the old file names
16 | 			fileName: (format) =>
17 | 				format === "es" ? "tinybox.esm.js" : "tinybox.umd.js",
18 | 		},
19 | 		minify: "terser",
20 | 		terserOptions: {
21 | 			output: {
22 | 				ecma: 6,
23 | 			},
24 | 		},
25 | 	},
26 | 	rollupOptions: {
27 | 		external: ["vue"],
28 | 		output: {
29 | 			// Provide global variables to use in the UMD build
30 | 			// for externalized deps
31 | 			globals: {
32 | 				vue: "Vue",
33 | 			},
34 | 		},
35 | 	},
36 | 	plugins: [
37 | 		vue({
38 | 			style: {
39 | 				postcssPlugins: [autoprefixer],
40 | 			},
41 | 			template: {
42 | 				compilerOptions: {
43 | 					whitespace: "condense",
44 | 				},
45 | 			},
46 | 		}),
47 | 		cssInjectedByJsPlugin(),
48 | 	],
49 | });
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vue-tinybox",
 3 | 	"version": "2.0.0-alpha.1",
 4 | 	"description": "A slick, yet tiny lightbox gallery for Vue.js",
 5 | 	"license": "MIT",
 6 | 	"keywords": [
 7 | 		"vue",
 8 | 		"vuejs",
 9 | 		"vue.js",
10 | 		"lightbox",
11 | 		"gallery"
12 | 	],
13 | 	"homepage": "https://os.kytta.dev/vue-tinybox",
14 | 	"repository": {
15 | 		"type": "git",
16 | 		"url": "git+https://github.com/kytta/vue-tinybox.git"
17 | 	},
18 | 	"bugs": {
19 | 		"url": "https://github.com/kytta/vue-tinybox/issues"
20 | 	},
21 | 	"author": {
22 | 		"name": "Nikita Karamov",
23 | 		"email": "me@kytta.dev",
24 | 		"url": "https://www.kytta.dev/"
25 | 	},
26 | 	"type": "module",
27 | 	"main": "./dist/tinybox.umd.js",
28 | 	"module": "./dist/tinybox.esm.js",
29 | 	"unpkg": "./dist/tinybox.umd.js",
30 | 	"exports": {
31 | 		"require": "./dist/tinybox.umd.js",
32 | 		"import": "./dist/tinybox.esm.js"
33 | 	},
34 | 	"browser": {
35 | 		"./sfc": "src/tinybox.vue"
36 | 	},
37 | 	"files": [
38 | 		"dist/tinybox.umd.js",
39 | 		"dist/tinybox.esm.js",
40 | 		"src/tinybox.vue"
41 | 	],
42 | 	"scripts": {
43 | 		"build": "vite build",
44 | 		"dev": "vite",
45 | 		"fmt": "prettier --write .",
46 | 		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore",
47 | 		"size": "size-limit",
48 | 		"pretest": "pnpm run build",
49 | 		"test": "pnpm run lint && pnpm run size"
50 | 	},
51 | 	"devDependencies": {
52 | 		"@babel/core": "^7.10.3",
53 | 		"@babel/preset-env": "^7.10.3",
54 | 		"@rushstack/eslint-patch": "^1.2.0",
55 | 		"@size-limit/preset-small-lib": "^4.5.2",
56 | 		"@vitejs/plugin-vue2": "^2.2.0",
57 | 		"@vue/eslint-config-prettier": "^7.0.0",
58 | 		"autoprefixer": "^9.8.4",
59 | 		"eslint": "^8.33.0",
60 | 		"eslint-config-xo": "^0.43.1",
61 | 		"eslint-plugin-vue": "^9.9.0",
62 | 		"postcss": "^7.0.32",
63 | 		"prettier": "^2.8.3",
64 | 		"size-limit": "^4.5.2",
65 | 		"terser": "^5.16.2",
66 | 		"vite": "^4.1.1",
67 | 		"vite-plugin-css-injected-by-js": "^2.4.0",
68 | 		"vue": "^2",
69 | 		"vue-eslint-parser": "^9.1.0",
70 | 		"vue-template-compiler": "^2.7.14"
71 | 	},
72 | 	"size-limit": [
73 | 		{
74 | 			"path": "dist/tinybox.umd.js",
75 | 			"limit": "3333 B",
76 | 			"webpack": false
77 | 		},
78 | 		{
79 | 			"path": "dist/tinybox.esm.js",
80 | 			"limit": "3333 B"
81 | 		}
82 | 	],
83 | 	"engines": {
84 | 		"node": ">=10"
85 | 	}
86 | }
87 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<title>[DEV] vue-tinybox</title>
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 | 		<style>
 9 | 			body {
10 | 				height: 3000px; /* to test scrolling */
11 | 			}
12 | 
13 | 			.open-tinybox {
14 | 				display: inline-block;
15 | 				cursor: pointer;
16 | 				margin-right: 10px;
17 | 			}
18 | 		</style>
19 | 
20 | 		<!-- development version, includes helpful console warnings -->
21 | 		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
22 | 		<script src="./src/index.js" type="module"></script>
23 | 	</head>
24 | 	<body>
25 | 		<div id="app">
26 | 			<h2>vue-tinybox demo: vanilla Vue.js</h2>
27 | 			<div>
28 | 				<input v-model="loopCheckbox" id="loop" type="checkbox" />
29 | 				<label for="loop">Loop</label>
30 | 				<br />
31 | 				<input v-model="thumbsCheckbox" id="thumbs" type="checkbox" />
32 | 				<label for="thumbs">Thumbnails</label>
33 | 			</div>
34 | 			<p>Click on any image below to open <code>Tinybox</code></p>
35 | 
36 | 			<Tinybox
37 | 				v-model="index"
38 | 				:images="images"
39 | 				:loop="loopCheckbox"
40 | 				:no-thumbs="!thumbsCheckbox"
41 | 			></Tinybox>
42 | 			<img
43 | 				v-for="(img, idx) in thumbs"
44 | 				class="open-tinybox"
45 | 				width="100"
46 | 				:src="img"
47 | 				@click="index = idx"
48 | 			/>
49 | 		</div>
50 | 
51 | 		<script type="module">
52 | 			new Vue({
53 | 				el: "#app",
54 | 				data: function () {
55 | 					return {
56 | 						images: [
57 | 							{
58 | 								src: "https://picsum.photos/id/13/500/1000",
59 | 								alt: "An empty beach",
60 | 								thumbnail: "https://picsum.photos/id/13/200",
61 | 								caption: "Beach",
62 | 							},
63 | 							{
64 | 								src: "https://picsum.photos/id/42/1500/600",
65 | 								alt: "A café desk",
66 | 								caption: "Café",
67 | 							},
68 | 							{
69 | 								src: "https://picsum.photos/id/256/800/800",
70 | 								thumbnail: "https://picsum.photos/id/256/200",
71 | 								caption: "Mountain range",
72 | 							},
73 | 							"https://picsum.photos/id/69/800/600",
74 | 							"https://picsum.photos/id/420/800/600",
75 | 						],
76 | 						thumbs: [
77 | 							"https://picsum.photos/id/13/200",
78 | 							"https://picsum.photos/id/42/200",
79 | 							"https://picsum.photos/id/256/200",
80 | 							"https://picsum.photos/id/69/200",
81 | 							"https://picsum.photos/id/420/200",
82 | 						],
83 | 						index: null,
84 | 						loopCheckbox: false,
85 | 						thumbsCheckbox: true,
86 | 					};
87 | 				},
88 | 			});
89 | 		</script>
90 | 	</body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/docs/awsm.opt.min.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | 
3 | /*!
4 |  * awsm.css v3.0.4 (https://igoradamenko.github.io/awsm.css/)
5 |  * Optimized for https://os.kytta.dev/vue-tinybox
6 |  * (c) 2015 Igor Adamenko
7 |  * MIT License
8 |  */html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;font-size:100%;line-height:1.4;background:#fff;color:#000;-webkit-overflow-scrolling:touch}body{margin:1.2em;font-size:1rem}@media (min-width:20rem){body{font-size:calc(.875rem + .625vw)}}@media (min-width:40rem){body{font-size:1.125rem}}body article,body footer,body header,body main{position:relative;max-width:40rem;margin:0 auto}body>header{margin-bottom:3.5em}body>header h1{margin:0;font-size:1.5em}body>header p{margin:0;font-size:.85em}body>footer{margin-top:6em;padding-bottom:1.5em;text-align:center;font-size:.8rem;color:#aaa}nav{margin:1em 0}nav ul{list-style:none;margin:0;padding:0}nav li{display:inline-block;margin-right:1em;margin-bottom:.25em}nav a:visited{color:#0064c1}nav a:hover{color:#f00000}ul{margin-top:0;padding-top:0;padding-left:2.5em}ul li+li{margin-top:.25em}p{margin:1em 0;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}p:first-child{margin-top:0}p:last-child{margin-bottom:0}p img{float:right;margin-bottom:.5em;margin-left:.5em}aside{margin:.5em 0;font-style:italic;color:#aaa}@media (min-width:65rem){aside{position:absolute;right:-12.5rem;width:9.375rem;max-width:9.375rem;margin:0;padding-left:.5em;font-size:.8em;border-left:1px solid #f2f2f2}}h1,h2,h3{margin:1.25em 0 0;line-height:1.2}h2:focus>a[href^="#"][id]:empty,h2:hover>a[href^="#"][id]:empty{opacity:1}h1+p,h2+p,h3+p{margin-top:.5em}h2>a[href^="#"][id]:empty{position:absolute;left:-.65em;opacity:0;text-decoration:none;font-weight:400;line-height:1;color:#aaa}@media (min-width:40rem){h2>a[href^="#"][id]:empty{left:-.8em}}h2>a[href^="#"][id]:empty:focus,h2>a[href^="#"][id]:empty:hover,h2>a[href^="#"][id]:empty:target{opacity:1;box-shadow:none;color:#000}h2>a[href^="#"][id]:empty:target:focus{outline:none}h2>a[href^="#"][id]:empty:before{content:"§ "}h1{font-size:2.5em}h2{font-size:1.75em}h3{font-size:1.25em}article+article{margin-top:4em}a{color:#0064c1}a:visited{color:#8d39d0}a:active,a:hover{outline-width:0}a:hover{color:#f00000}img{display:block;max-width:100%;margin:0 auto}code{font-family:Consolas,Lucida Console,Monaco,monospace;font-style:normal}pre{overflow-x:auto;font-size:.8em;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)) 0 0,linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)) 100% 0;background-attachment:scroll,scroll;background-size:1px 100%,1px 100%;background-repeat:no-repeat,no-repeat}pre>code{display:inline-block;overflow-x:visible;box-sizing:border-box;min-width:100%;border-right:3px solid #fff;border-left:1px solid #fff}::selection{background:rgba(0,100,193,.25)}
9 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to vue-tinybox
 2 | 
 3 | Thank you for deciding to contribute to vue-tinybox! There are some things you need to know before starting.
 4 | 
 5 | - [I want to propose a feature or file a bug without writing code](#i-want-to-propose-a-feature-or-file-a-bug-without-writing-code)
 6 | - [I want to implement a feature or fix a bug myself](#i-want-to-implement-a-feature-or-fix-a-bug-myself)
 7 |   - [Branch naming](#branch-naming)
 8 |   - [Node version](#node-version)
 9 |   - [Package manager](#package-manager)
10 |   - [Dev environment](#dev-environment)
11 |   - [Testing](#testing)
12 |     - [ESLint](#eslint)
13 |     - [size-limit](#size-limit)
14 |   - [Pull request](#pull-request)
15 | 
16 | ## I want to propose a feature or file a bug without writing code
17 | 
18 | If you want to ask a question, propose a new feature or tell us about a bug, you should [create a new issue](https://github.com/kytta/vue-tinybox/issues/new/choose) on the matter. Please make sure to pick the appropriate template and add as much information as you can. The more you tell me, the quicker can I resolve your issue :)
19 | 
20 | ## I want to implement a feature or fix a bug myself
21 | 
22 | There are rules I follow when I develop vue-tinybox, and I'd like other contributors to follow them too.
23 | 
24 | ### Branch naming
25 | 
26 | After forking this repo, please create a separate branch for every proposed feature. This is not enforced, but it helps a lot when navigating the PRs. Allowed are automatic names (e.g. 'patch-1') created when using GitHub's online editor.
27 | 
28 | ### Node version
29 | 
30 | All development should be done on the latest stable Node version with a set major number. Usually, it's the latest LTS release. Right now it is Node 14. You can always check the "Node.js CI" GitHub Action for the used version number. Use nvm if you want to install many Node versions.
31 | 
32 | ### Package manager
33 | 
34 | When developing or testing vue-tinybox, use Yarn v1 only. NPM and PNPM will not take Yarn's lockfile into account.
35 | 
36 | ### Dev environment
37 | 
38 | At the moment there are no automatic tests. To help with manual testing, I have created a test page. To have the package be built every time you edit code and to be able to see the changes, run `yarn dev`. This will launch a static file server in the background on port 8629 (TNBX). The webpage will not auto-reload, however — you should do it yourself. The webpage offers useful controls to test the package.
39 | 
40 | ### Testing
41 | 
42 | Testing consists of two steps: linting and checking the size. To run all tests, run `yarn test`.
43 | 
44 | #### ESLint
45 | 
46 | I use [ESLint](https://eslint.org/) to lint the code. Setting up an integration with your editor is quite helpful. You don't have to do it — CI will lint your code anyway. Please note that I **do not** accept unlinted code.
47 | 
48 | You can run `yarn test:lint` to lint the code yourself.
49 | 
50 | #### size-limit
51 | 
52 | To keep the package size under control I use [size-limit](https://github.com/ai/size-limit). It is very important for me to keep the package small. Don't worry, if your edits make it go over the limit. Submit the pull request, and we'll figure out the solution together :)
53 | 
54 | You can run `yarn test:size` to check the built bundle size.
55 | 
56 | ### Pull request
57 | 
58 | After your work is done, you can submit a pull request. There are some automated checks. One is from a GitHub Action — it executes `yarn test`. Another one is from Codacy — it checks the code quality. Please fix the issues detected by Codacy!
59 | 
60 | ---
61 | 
62 | After you submitted your issue or pull request, I will reach out to you and get the needed things done. Don't hesitate commenting on my decisions if you find them incorrect or unclear.
63 | 
64 | If you have any questions, you can always contact me at [me@kytta.dev](mailto:me@kytta.dev)
65 | 
66 | Thank you once again for participating in the life of vue-tinybox!
67 | 
68 | -- _Nikita Karamov_
69 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-tinybox
  2 | 
  3 | <img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f30c.png" align="right" alt="Milky Way emoji" width="96" height="96">
  4 | 
  5 | A slick, yet tiny lightbox gallery for Vue.js
  6 | 
  7 | - **Slick.** No excessive design. Pictures, thumbnails, controls.
  8 | - **Tiny.** Dependency-free. 3 KB minified and gzipped.
  9 | - **Adaptive.** Works on computers. Works on tablets. Works on phones.
 10 | 
 11 | ## Demo
 12 | 
 13 | Observe the live demo here: [os.kytta.dev/vue-tinybox](https://os.kytta.dev/vue-tinybox)
 14 | 
 15 | ## Basic usage
 16 | 
 17 | ```html
 18 | <Tinybox v-model="index" :images="images" loop no-thumbs />
 19 | ```
 20 | 
 21 | ## Install
 22 | 
 23 | ### Browsers
 24 | 
 25 | 1. Include the link to Tinybox in `<head>` alongside Vue.js:
 26 | 
 27 |    ```html
 28 |    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 29 |    <script src="https://cdn.jsdelivr.net/npm/vue-tinybox"></script>
 30 |    ```
 31 | 
 32 | 2. Tinybox will auto-install upon detecting the global Vue instance. You can use
 33 |    it right away.
 34 | 
 35 | ### Node environment
 36 | 
 37 | 1. Install the Tinybox package:
 38 | 
 39 |    ```sh
 40 |    npm install vue-tinybox
 41 |    # or
 42 |    yarn add vue-tinybox
 43 |    ```
 44 | 
 45 | 2. Register it as you usually would:
 46 | 
 47 |    ```js
 48 |    import Tinybox from "vue-tinybox";
 49 |    // or
 50 |    const Tinybox = require("vue-tinybox");
 51 | 
 52 |    Vue.component("Tinybox", Tinybox);
 53 |    //or
 54 |    Vue.use(Tinybox);
 55 |    //or
 56 |    new Vue({
 57 |    	components: { Tinybox },
 58 |    	// ...
 59 |    });
 60 |    ```
 61 | 
 62 | ## API
 63 | 
 64 | ### Image object
 65 | 
 66 | An `Image` object is an object with following fields:
 67 | 
 68 | | Field name  | Type     | Description                                                      |
 69 | | ----------- | -------- | ---------------------------------------------------------------- |
 70 | | `src`       | `String` | Image URL                                                        |
 71 | | `thumbnail` | `String` | (optional) Thumbnail URL. If omitted, the image URL will be used |
 72 | | `caption`   | `String` | (optional) Caption text to be overlayed on the image             |
 73 | | `alt`       | `String` | (optional) Alt text. If omitted, the caption will be used        |
 74 | 
 75 | ### Props
 76 | 
 77 | | Prop name   | Type      | Default | Description                                                   |
 78 | | ----------- | --------- | ------- | ------------------------------------------------------------- |
 79 | | `images`    | `Array`   | `[]`    | List of either image URLs or [`Image`](#image-object) objects |
 80 | | `loop`      | `Boolean` | `false` | Indicates whether the images should loop                      |
 81 | | `no-thumbs` | `Boolean` | `false` | When enabled, the thumbnails are hidden                       |
 82 | 
 83 | ### `v-model`
 84 | 
 85 | You can use `v-model` on a `Number` variable, which will hold the index of the
 86 | image currently open. If no image is open (i.e. Tinybox is closed), the value
 87 | becomes `null`.
 88 | 
 89 | Instead of `v-model` you can use the `index` prop and `change` event:
 90 | 
 91 | ```html
 92 | <Tinybox v-model="index" :images="images" />
 93 | 
 94 | <!-- is equivalent to -->
 95 | 
 96 | <Tinybox :images="images" :index="index" @change="(i) => {index = i}" />
 97 | ```
 98 | 
 99 | ### Events
100 | 
101 | | Event name    | Payload                                  | Description                                                                                |
102 | | ------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------ |
103 | | `change`      | index of the image changed to            | Is emitted on any image change (thumbnail navigation, prev/next, close)                    |
104 | | `prev`/`next` | index of the image changed to            | Is emitted specifically when the user clicks "Prev"/"Next" or presses Left/Right arrow key |
105 | | `close`       | index of the image Tinybox was closed at | Is emitted specifically when the user clicks "Close" or presses the Esc key                |
106 | 
107 | Events can come in handy for business logic cases:
108 | 
109 | ```html
110 | <Tinybox
111 | 	:images="images"
112 | 	v-model="index"
113 | 	@change="onChange"
114 | 	@prev="onPrevious"
115 | 	@next="onNext"
116 | 	@close="onClose"
117 | />
118 | ```
119 | 
120 | ```js
121 | export default {
122 | 	// ...
123 | 	methods: {
124 | 		onChange(index) {
125 | 			console.log("User navigated to the photo: ", index);
126 | 		},
127 | 		onPrevious(index) {
128 | 			console.log("User clicked 'previous' to switch to: ", index);
129 | 		},
130 | 		onNext(index) {
131 | 			console.log("User clicked 'previous' to switch to: ", index);
132 | 		},
133 | 		onClose(index) {
134 | 			console.log("User closed TinyBox on this photo: ", index);
135 | 		},
136 | 	},
137 | };
138 | ```
139 | 
140 | ## Browser support
141 | 
142 | | ![Chrome][chrome] | ![Firefox][firefox] | ![Safari][safari] | ![MS Edge][edge] | ![Internet Explorer][ie] |
143 | | :---------------: | :-----------------: | :---------------: | :--------------: | :----------------------: |
144 | |      **21+**      |       **28+**       |      **7+**       |     **16+**      |          **11**          |
145 | 
146 | [chrome]: https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_48x48.png
147 | [firefox]: https://github.com/alrra/browser-logos/raw/master/src/firefox/firefox_48x48.png
148 | [safari]: https://github.com/alrra/browser-logos/raw/master/src/safari/safari_48x48.png
149 | [edge]: https://github.com/alrra/browser-logos/raw/master/src/edge/edge_48x48.png
150 | [ie]: https://github.com/alrra/browser-logos/raw/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png
151 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="UTF-8" />
  5 | 		<meta
  6 | 			name="description"
  7 | 			content="A slick, yet tiny lightbox gallery for Vue.js"
  8 | 		/>
  9 | 		<meta
 10 | 			name="keywords"
 11 | 			content="vue,vuejs,vue.js,lightbox,gallery,component,javascript"
 12 | 		/>
 13 | 		<meta name="author" content="Nikita Karamov" />
 14 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 15 | 
 16 | 		<title>vue-tinybox | A slick, yet tiny lightbox gallery for Vue.js</title>
 17 | 
 18 | 		<link rel="preconnect" href="https://picsum.photos/" />
 19 | 
 20 | 		<link rel="stylesheet" href="awsm.opt.min.css" />
 21 | 		<style>
 22 | 			.open-tinybox {
 23 | 				display: inline-block;
 24 | 				cursor: pointer;
 25 | 				margin: 5px;
 26 | 				width: 100px;
 27 | 			}
 28 | 		</style>
 29 | 
 30 | 		<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
 31 | 		<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
 32 | 	</head>
 33 | 
 34 | 	<body>
 35 | 		<header>
 36 | 			<p>
 37 | 				<img
 38 | 					src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f30c.png"
 39 | 					width="64"
 40 | 					height="64"
 41 | 					alt="Milky Way emoji"
 42 | 				/>
 43 | 			</p>
 44 | 			<h1>vue-tinybox</h1>
 45 | 			<p>A slick, yet tiny lightbox gallery for Vue.js</p>
 46 | 			<nav>
 47 | 				<ul>
 48 | 					<li>
 49 | 						<a
 50 | 							href="https://www.npmjs.com/package/vue-tinybox"
 51 | 							target="_blank"
 52 | 							rel="noopener noreferrer"
 53 | 							>npm</a
 54 | 						>
 55 | 					</li>
 56 | 					<li>
 57 | 						<a
 58 | 							href="https://github.com/kytta/vue-tinybox"
 59 | 							target="_blank"
 60 | 							rel="noopener noreferrer"
 61 | 							>github</a
 62 | 						>
 63 | 					</li>
 64 | 				</ul>
 65 | 			</nav>
 66 | 		</header>
 67 | 
 68 | 		<main>
 69 | 			<article>
 70 | 				<h2>
 71 | 					<a id="what-is-it" href="#what-is-it" aria-hidden="true"></a>
 72 | 					What is it?
 73 | 				</h2>
 74 | 
 75 | 				<p>Tinybox is a simple lightbox gallery for Vue.js.</p>
 76 | 
 77 | 				<p>
 78 | 					While being not as customizable as some other lightboxes, Tinybox is
 79 | 					very slick and lightweight (3&nbsp;KB minzipped). Tinybox is great on
 80 | 					mobile devices too: it supports swipe gestures and changes its size
 81 | 					responsively.
 82 | 				</p>
 83 | 				<aside>
 84 | 					<p>
 85 | 						the size of Tinybox is controlled with
 86 | 						<a
 87 | 							href="https://github.com/ai/size-limit"
 88 | 							target="_blank"
 89 | 							rel="noopener noreferrer"
 90 | 							>Size Limit</a
 91 | 						>
 92 | 					</p>
 93 | 				</aside>
 94 | 
 95 | 				<pre><code>&lt;Tinybox
 96 |     v-model="index"
 97 |     :images="images"
 98 | /&gt;</code></pre>
 99 | 			</article>
100 | 
101 | 			<article id="demo-app">
102 | 				<h2>
103 | 					<a href="#demo" id="demo" aria-hidden="true"></a>
104 | 					Demo
105 | 				</h2>
106 | 				<p>Click on any image below to open Tinybox</p>
107 | 
108 | 				<Tinybox v-model="index" :images="images"></Tinybox>
109 | 
110 | 				<img
111 | 					v-for="(img, idx) in images"
112 | 					:src="img.thumbnail"
113 | 					:alt="img.alt"
114 | 					class="open-tinybox"
115 | 					@click="index = idx"
116 | 				/>
117 | 			</article>
118 | 
119 | 			<article>
120 | 				<h2>
121 | 					<a href="#install" id="install" aria-hidden="true"></a>
122 | 					Install
123 | 				</h2>
124 | 
125 | 				<h3>Browsers</h3>
126 | 				<p>
127 | 					Include the link to Tinybox in <code>&lt;head&gt;</code> alongside
128 | 					Vue.js:
129 | 				</p>
130 | 				<pre><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue-tinybox"&gt;&lt;/script&gt;</code></pre>
131 | 
132 | 				<h3>Node.js</h3>
133 | 				<p>Install the Tinybox package and register it as you usually would:</p>
134 | 				<pre><code>$ npm install vue-tinybox</code></pre>
135 | 				<pre><code>import Tinybox from "vue-tinybox";
136 | Vue.component('Tinybox', Tinybox);</code></pre>
137 | 			</article>
138 | 
139 | 			<article>
140 | 				<h2>API and more</h2>
141 | 
142 | 				<p>
143 | 					For API docs and more info on installation consult the
144 | 					<a
145 | 						href="https://github.com/kytta/vue-tinybox#readme"
146 | 						rel="noopener noreferrer"
147 | 						>README</a
148 | 					>.
149 | 				</p>
150 | 			</article>
151 | 		</main>
152 | 
153 | 		<footer>
154 | 			<p>
155 | 				vue-tinybox by
156 | 				<a href="https://www.kytta.dev/" target="_blank" rel="noopener noreferrer"
157 | 					>Nikita Karamov</a
158 | 				>
159 | 			</p>
160 | 			<p>
161 | 				Website built with
162 | 				<a
163 | 					href="https://igoradamenko.github.io/awsm.css/index.html"
164 | 					target="_blank"
165 | 					rel="noopener noreferrer"
166 | 					>awsm.css</a
167 | 				>
168 | 			</p>
169 | 		</footer>
170 | 
171 | 		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
172 | 		<script
173 | 			defer
174 | 			src="https://cdn.jsdelivr.net/npm/vue-tinybox@1.3/dist/tinybox.umd.js"
175 | 		></script>
176 | 
177 | 		<script>
178 | 			window.onload = function () {
179 | 				new Vue({
180 | 					components: { Tinybox },
181 | 					el: "#demo-app",
182 | 					data: function () {
183 | 						return {
184 | 							images: [
185 | 								{
186 | 									src: "https://picsum.photos/id/13/600/1000",
187 | 									alt: "Empty beach",
188 | 									caption: "Beach",
189 | 									thumbnail: "https://picsum.photos/id/13/200",
190 | 								},
191 | 								{
192 | 									src: "https://picsum.photos/id/42/800/600",
193 | 									alt: "Desk in a café",
194 | 									caption: "Café",
195 | 									thumbnail: "https://picsum.photos/id/42/200",
196 | 								},
197 | 								{
198 | 									src: "https://picsum.photos/id/256/1500/600",
199 | 									alt: "Mountains range",
200 | 									caption: "Mountains",
201 | 									thumbnail: "https://picsum.photos/id/256/200",
202 | 								},
203 | 								{
204 | 									src: "https://picsum.photos/id/666/800/600",
205 | 									alt: "Green trees in forest",
206 | 									caption: "Forest",
207 | 									thumbnail: "https://picsum.photos/id/666/200",
208 | 								},
209 | 							],
210 | 							index: null,
211 | 						};
212 | 					},
213 | 				});
214 | 			};
215 | 		</script>
216 | 	</body>
217 | </html>
218 | 


--------------------------------------------------------------------------------
/src/tinybox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<transition name="fade">
  3 | 		<div
  4 | 			v-if="open"
  5 | 			class="tinybox"
  6 | 			@click="close"
  7 | 			@wheel.prevent
  8 | 			@touchmove.prevent
  9 | 		>
 10 | 			<div
 11 | 				class="tinybox__content"
 12 | 				:class="{ 'tinybox__content--no-thumbs': noThumbs }"
 13 | 				@touchstart="swipeStart"
 14 | 				@touchmove="swipe"
 15 | 			>
 16 | 				<transition :name="slide">
 17 | 					<img
 18 | 						:key="images[index].src || images[index] || ''"
 19 | 						:src="images[index].src || images[index] || ''"
 20 | 						:alt="images[index].alt || images[index].caption || ''"
 21 | 						class="tinybox__content__image"
 22 | 						@click.stop="next"
 23 | 					/>
 24 | 				</transition>
 25 | 
 26 | 				<span
 27 | 					v-if="images[index].caption"
 28 | 					class="tinybox__content__image__caption"
 29 | 					v-text="images[index].caption"
 30 | 				/>
 31 | 
 32 | 				<div
 33 | 					v-if="prevImage !== index"
 34 | 					class="tinybox__content__control tinybox__content__control--prev"
 35 | 					@click.stop="prev"
 36 | 				/>
 37 | 				<div
 38 | 					v-if="nextImage !== index"
 39 | 					class="tinybox__content__control tinybox__content__control--next"
 40 | 					@click.stop="next"
 41 | 				/>
 42 | 				<div
 43 | 					class="tinybox__content__control tinybox__content__control--close"
 44 | 					@click.stop="close"
 45 | 				/>
 46 | 			</div>
 47 | 			<div
 48 | 				v-if="!noThumbs"
 49 | 				ref="thumbs"
 50 | 				class="tinybox__thumbs"
 51 | 				@touchmove.stop
 52 | 				@wheel.stop
 53 | 			>
 54 | 				<img
 55 | 					v-for="(image, idx) in images"
 56 | 					:key="idx"
 57 | 					ref="thumbItems"
 58 | 					:class="{ 'tinybox__thumbs__item--active': index === idx }"
 59 | 					:src="image.thumbnail || image.src || image || ''"
 60 | 					:alt="images[index].alt || images[index].caption || ''"
 61 | 					class="tinybox__thumbs__item"
 62 | 					@click.stop="goto(idx)"
 63 | 				/>
 64 | 			</div>
 65 | 		</div>
 66 | 	</transition>
 67 | </template>
 68 | 
 69 | <script>
 70 | /**
 71 |  * The Tinybox component
 72 |  *
 73 |  * @event change - the index has been changed. The current index is sent as payload
 74 |  */
 75 | export default {
 76 | 	// eslint-disable-next-line vue/multi-word-component-names, no-warning-comments
 77 | 	name: "Tinybox", // TODO: rename to TinyBox
 78 | 	model: {
 79 | 		prop: "index",
 80 | 		event: "change",
 81 | 	},
 82 | 	props: {
 83 | 		/**
 84 | 		 * List of images to display in the lightbox
 85 | 		 *
 86 | 		 * Any array item can be either a string containing the image URL or an object.
 87 | 		 * The object fields are the following:
 88 | 		 * - `src` - image URL
 89 | 		 * - `thumbnail` - thumbnail URL. If omitted, the image URL will be used
 90 | 		 * - `caption` - caption text to be overlayed on the image
 91 | 		 * - `alt` - alt text. If omitted, the caption will be used
 92 | 		 */
 93 | 		images: {
 94 | 			type: Array,
 95 | 			default: () => [],
 96 | 		},
 97 | 
 98 | 		/**
 99 | 		 * The index of the image to be opened in the lightbox
100 | 		 */
101 | 		index: {
102 | 			type: Number,
103 | 			default: null,
104 | 		},
105 | 
106 | 		/**
107 | 		 * Indicates whether the images carousel should loop around itself
108 | 		 */
109 | 		loop: {
110 | 			type: Boolean,
111 | 			default: false,
112 | 		},
113 | 
114 | 		/**
115 | 		 * When enabled, the thumbnails are hidden
116 | 		 */
117 | 		noThumbs: {
118 | 			type: Boolean,
119 | 			default: false,
120 | 		},
121 | 	},
122 | 	data() {
123 | 		return {
124 | 			/**
125 | 			 * Transition name to be used on photo switch
126 | 			 *
127 | 			 * @type string
128 | 			 */
129 | 			slide: "next",
130 | 
131 | 			/**
132 | 			 * Indication that the swipe action has been executed
133 | 			 *
134 | 			 * @type boolean
135 | 			 */
136 | 			swipeDone: false,
137 | 
138 | 			/**
139 | 			 * The swipe distance or null if no swipe action is being executed
140 | 			 *
141 | 			 * @type null|number
142 | 			 */
143 | 			swipeX: null,
144 | 		};
145 | 	},
146 | 	computed: {
147 | 		/**
148 | 		 * Indicates whether the Tinybox is open
149 | 		 *
150 | 		 * @returns {boolean} open state
151 | 		 */
152 | 		open() {
153 | 			return this.index !== null;
154 | 		},
155 | 
156 | 		/**
157 | 		 * Index of the image _previous_ to the one being open
158 | 		 *
159 | 		 * @returns {number} index
160 | 		 */
161 | 		prevImage() {
162 | 			if (this.index > 0) {
163 | 				return this.index - 1;
164 | 			}
165 | 
166 | 			if (this.loop) {
167 | 				return this.images.length - 1;
168 | 			}
169 | 
170 | 			return this.index;
171 | 		},
172 | 
173 | 		/**
174 | 		 * Index of the image _next_ to the one being open
175 | 		 *
176 | 		 * @returns {number} index
177 | 		 */
178 | 		nextImage() {
179 | 			if (this.index < this.images.length - 1) {
180 | 				return this.index + 1;
181 | 			}
182 | 
183 | 			if (this.loop) {
184 | 				return 0;
185 | 			}
186 | 
187 | 			return this.index;
188 | 		},
189 | 	},
190 | 	watch: {
191 | 		open(value) {
192 | 			if (value) {
193 | 				window.addEventListener("keyup", this.keyup);
194 | 			} else {
195 | 				window.removeEventListener("keyup", this.keyup);
196 | 			}
197 | 		},
198 | 		/*
199 | 		 * Center the thumbnails' scrollbar to the clicked image
200 | 		 */
201 | 		index(newIndex) {
202 | 			if (!this.noThumbs && newIndex !== null) {
203 | 				this.$nextTick(() => {
204 | 					const { thumbs, thumbItems } = this.$refs;
205 | 					const curThumb = thumbItems[newIndex];
206 | 					// If the thumbnail's center X position is bigger than the half of the screen
207 | 					// then scroll the thumbs scrollbar to center the image
208 | 					if (
209 | 						curThumb.offsetLeft + curThumb.clientWidth / 2 >
210 | 						window.innerWidth / 2
211 | 					) {
212 | 						const distance = curThumb.offsetLeft - window.innerWidth / 2;
213 | 						// If there's space to scroll to center the image, then center it
214 | 						// otherwise use the maximum scroll width
215 | 						if (distance < thumbs.scrollWidth) {
216 | 							thumbs.scrollLeft = distance + curThumb.clientWidth / 2;
217 | 						} else {
218 | 							thumbs.scrollLeft = thumbs.scrollWidth;
219 | 						}
220 | 					} else {
221 | 						thumbs.scrollLeft = 0;
222 | 					}
223 | 				});
224 | 			}
225 | 		},
226 | 	},
227 | 	methods: {
228 | 		/**
229 | 		 * Closes the Tinybox
230 | 		 */
231 | 		close() {
232 | 			const oldIndex = this.index;
233 | 			this.goto(null);
234 | 			this.$emit("close", oldIndex);
235 | 		},
236 | 
237 | 		/**
238 | 		 * Navigates to the previous image
239 | 		 */
240 | 		prev() {
241 | 			this.$emit("prev", this.prevImage);
242 | 			this.goto(this.prevImage, "prev");
243 | 		},
244 | 
245 | 		/**
246 | 		 * Navigates to the next image
247 | 		 */
248 | 		next() {
249 | 			this.$emit("next", this.nextImage);
250 | 			this.goto(this.nextImage, "next");
251 | 		},
252 | 
253 | 		/**
254 | 		 * Navigates to the image with a specific index
255 | 		 * @param {null|number} idx image index
256 | 		 * @param {string} [slide] name of the transition to be used
257 | 		 */
258 | 		goto(idx, slide) {
259 | 			this.slide = slide || (this.index < idx ? "next" : "prev");
260 | 
261 | 			this.$emit("change", idx);
262 | 		},
263 | 
264 | 		/**
265 | 		 * Handles the `keyup` event
266 | 		 *
267 | 		 * @param {KeyboardEvent} e event
268 | 		 */
269 | 		keyup(e) {
270 | 			if (
271 | 				e.code === "ArrowRight" ||
272 | 				e.key === "ArrowRight" ||
273 | 				e.key === "Right" ||
274 | 				e.keyCode === 39
275 | 			) {
276 | 				this.next();
277 | 			} else if (
278 | 				e.code === "ArrowLeft" ||
279 | 				e.key === "ArrowLeft" ||
280 | 				e.key === "Left" ||
281 | 				e.keyCode === 37
282 | 			) {
283 | 				this.prev();
284 | 			} else if (
285 | 				e.code === "Escape" ||
286 | 				e.key === "Escape" ||
287 | 				e.key === "Esc" ||
288 | 				e.keyCode === 27
289 | 			) {
290 | 				this.close();
291 | 			}
292 | 		},
293 | 
294 | 		/**
295 | 		 * Handles the `touchstart` event
296 | 		 *
297 | 		 * The `touchstart` event on the image indicates the beginning of the swipe action.
298 | 		 *
299 | 		 * @param {TouchEvent} e event
300 | 		 */
301 | 		swipeStart(e) {
302 | 			this.swipeDone = false;
303 | 			if (e.changedTouches.length === 1) {
304 | 				this.swipeX = e.changedTouches[0].screenX;
305 | 			}
306 | 		},
307 | 
308 | 		/**
309 | 		 * Handles the `touch` event
310 | 		 *
311 | 		 * The `touch` event registered after the `touchstart` event indicates the swipe being in action
312 | 		 *
313 | 		 * @param {TouchEvent} e event
314 | 		 */
315 | 		swipe(e) {
316 | 			if (!this.swipeDone && e.changedTouches.length === 1) {
317 | 				const swipeDistance = e.changedTouches[0].screenX - this.swipeX;
318 | 
319 | 				if (swipeDistance >= 50) {
320 | 					this.prev();
321 | 					this.swipeDone = true;
322 | 				} else if (swipeDistance <= -50) {
323 | 					this.next();
324 | 					this.swipeDone = true;
325 | 				}
326 | 			}
327 | 		},
328 | 	},
329 | };
330 | </script>
331 | 
332 | <style scoped>
333 | .tinybox {
334 | 	background-color: rgba(0, 0, 0, 0.9);
335 | 	bottom: 0;
336 | 	left: 0;
337 | 	position: fixed;
338 | 	right: 0;
339 | 	text-align: center;
340 | 	top: 0;
341 | 	z-index: 1000;
342 | }
343 | 
344 | .tinybox__content {
345 | 	height: 85%;
346 | 	position: relative;
347 | 	width: 100%;
348 | 	display: flex;
349 | 	align-items: center;
350 | 	justify-content: center;
351 | }
352 | 
353 | .tinybox__content--no-thumbs {
354 | 	height: 100%;
355 | }
356 | 
357 | .tinybox__content__image {
358 | 	background-color: #222;
359 | 	cursor: pointer;
360 | 	display: inline-block;
361 | 	max-height: 90%;
362 | 	max-width: 80%;
363 | 	position: absolute;
364 | }
365 | 
366 | .tinybox__content__image__caption {
367 | 	position: absolute;
368 | 	bottom: 0;
369 | 	padding: 0.5rem 0.75rem;
370 | 	border-radius: 5px;
371 | 	color: white;
372 | 	background-color: rgba(0, 0, 0, 0.9);
373 | 	opacity: 0.75;
374 | 	font-family: sans-serif;
375 | 	font-weight: lighter;
376 | 	font-size: 1.2rem;
377 | }
378 | 
379 | .tinybox__content__control {
380 | 	background: no-repeat center/24px;
381 | 
382 | 	cursor: pointer;
383 | 	opacity: 0.5;
384 | 	position: absolute;
385 | 	top: 0;
386 | 	transition: opacity 300ms ease;
387 | 	width: 4em;
388 | }
389 | 
390 | .tinybox__content__control:hover {
391 | 	opacity: 1;
392 | }
393 | 
394 | .tinybox__content__control--prev {
395 | 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M20 30 L8 16 20 2' /%3E%3C/svg%3E");
396 | 	bottom: 0;
397 | 	left: 0;
398 | }
399 | 
400 | .tinybox__content__control--next {
401 | 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M12 30 L24 16 12 2' /%3E%3C/svg%3E");
402 | 	bottom: 0;
403 | 	right: 0;
404 | }
405 | 
406 | .tinybox__content__control--close {
407 | 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 46 46' width='40' height='40' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M2 30 L30 2 M30 30 L2 2' /%3E%3C/svg%3E");
408 | 	height: 2.6em;
409 | 	right: 0;
410 | }
411 | 
412 | .tinybox__thumbs {
413 | 	bottom: 0;
414 | 	height: 15%;
415 | 	left: 0;
416 | 	line-height: 0;
417 | 	padding: 0 10px;
418 | 	position: absolute;
419 | 	right: 0;
420 | 	overflow-x: scroll;
421 | 	overflow-y: hidden;
422 | 	scroll-behavior: smooth;
423 | 	white-space: nowrap;
424 | }
425 | 
426 | .tinybox__thumbs__item {
427 | 	cursor: pointer;
428 | 	display: inline-block;
429 | 	height: 10vh;
430 | 	margin: 2.5vh 5px;
431 | 	object-fit: cover;
432 | 	overflow: hidden;
433 | 	width: 10vh;
434 | }
435 | 
436 | .tinybox__thumbs__item--active {
437 | 	opacity: 0.3;
438 | }
439 | 
440 | /*******************/
441 | /*   TRANSITIONS   */
442 | /*******************/
443 | 
444 | .fade-enter,
445 | .next-enter,
446 | .prev-enter,
447 | .fade-leave-active,
448 | .prev-leave-active,
449 | .next-leave-active {
450 | 	opacity: 0;
451 | }
452 | 
453 | .fade-enter-active,
454 | .fade-leave-active,
455 | .prev-leave-active,
456 | .next-leave-active {
457 | 	transition: opacity 300ms ease;
458 | }
459 | 
460 | .prev-enter {
461 | 	transform: translateX(-40px);
462 | }
463 | 
464 | .next-enter {
465 | 	transform: translateX(40px);
466 | }
467 | 
468 | .next-enter-active,
469 | .prev-enter-active {
470 | 	transition: opacity 300ms ease, transform 300ms ease;
471 | }
472 | </style>
473 | 


--------------------------------------------------------------------------------