├── .npmrc ├── src ├── routes │ ├── +layout.ts │ ├── +page.css │ └── +page.svelte ├── lib │ ├── index.ts │ ├── Bullet.svelte │ ├── LeftNav.svelte │ ├── RightNav.svelte │ ├── PlayPause.svelte │ ├── Fullscreen.svelte │ ├── types.ts │ ├── Item.svelte │ ├── SVG.svelte │ ├── Thumbnail.svelte │ ├── app.css.map │ ├── Slide.svelte │ ├── SwipeWrapper.svelte │ ├── ThumbnailSwipeWrapper.svelte │ ├── ThumbnailWrapper.svelte │ ├── SlideWrapper.svelte │ ├── styling.ts │ ├── app.scss │ ├── app.css │ └── ImageGallery.svelte ├── app.html └── app.d.ts ├── static ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 1t.jpg ├── 2.jpg ├── 2t.jpg ├── 3.jpg ├── 3t.jpg ├── 4.jpg ├── 4t.jpg ├── 4v.jpg ├── 5.jpg ├── 5t.jpg ├── 6.jpg ├── 6t.jpg ├── 7.jpg ├── 7t.jpg ├── 8.jpg ├── 8t.jpg ├── 9.jpg ├── 9t.jpg ├── 10t.jpg ├── 11t.jpg ├── 12t.jpg └── favicon.png ├── .vscode └── settings.json ├── .gitignore ├── vite.config.js ├── .eslintignore ├── .prettierignore ├── .prettierrc ├── svelte.config.js ├── .github └── workflows │ ├── lint.yml │ ├── check.yml │ └── static.yml ├── tsconfig.json ├── .eslintrc.cjs ├── LICENSE ├── package.json └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | -------------------------------------------------------------------------------- /static/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/1.jpg -------------------------------------------------------------------------------- /static/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/10.jpg -------------------------------------------------------------------------------- /static/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/11.jpg -------------------------------------------------------------------------------- /static/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/12.jpg -------------------------------------------------------------------------------- /static/1t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/1t.jpg -------------------------------------------------------------------------------- /static/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/2.jpg -------------------------------------------------------------------------------- /static/2t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/2t.jpg -------------------------------------------------------------------------------- /static/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/3.jpg -------------------------------------------------------------------------------- /static/3t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/3t.jpg -------------------------------------------------------------------------------- /static/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/4.jpg -------------------------------------------------------------------------------- /static/4t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/4t.jpg -------------------------------------------------------------------------------- /static/4v.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/4v.jpg -------------------------------------------------------------------------------- /static/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/5.jpg -------------------------------------------------------------------------------- /static/5t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/5t.jpg -------------------------------------------------------------------------------- /static/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/6.jpg -------------------------------------------------------------------------------- /static/6t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/6t.jpg -------------------------------------------------------------------------------- /static/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/7.jpg -------------------------------------------------------------------------------- /static/7t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/7t.jpg -------------------------------------------------------------------------------- /static/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/8.jpg -------------------------------------------------------------------------------- /static/8t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/8t.jpg -------------------------------------------------------------------------------- /static/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/9.jpg -------------------------------------------------------------------------------- /static/9t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/9t.jpg -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[svelte]": { 3 | "editor.tabSize": 2 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /static/10t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/10t.jpg -------------------------------------------------------------------------------- /static/11t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/11t.jpg -------------------------------------------------------------------------------- /static/12t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/12t.jpg -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react2svelte/image-gallery/HEAD/static/favicon.png -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | // Reexport your entry components here 2 | 3 | import ImageGallery from '$lib/ImageGallery.svelte'; 4 | 5 | export default ImageGallery; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | .idea 12 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()] 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte"], 7 | "pluginSearchDirs": ["."], 8 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 9 | } 10 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // See https://kit.svelte.dev/docs/types#app 5 | // for information about these interfaces 6 | // and what to do when importing types 7 | declare namespace App { 8 | // interface Error {} 9 | // interface Locals {} 10 | // interface PageData {} 11 | // interface Platform {} 12 | } 13 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-static'; 2 | import { vitePreprocess } from '@sveltejs/kit/vite'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | adapter: adapter() 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /src/lib/Bullet.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 19 | -------------------------------------------------------------------------------- /src/lib/RightNav.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | -------------------------------------------------------------------------------- /src/lib/PlayPause.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | -------------------------------------------------------------------------------- /src/lib/Fullscreen.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | 3 | on: 4 | push: 5 | branches: 6 | - '**' 7 | pull_request: 8 | branches: 9 | - '**' 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: 16.x 20 | - uses: actions/cache@v2 21 | with: 22 | path: ~/.npm 23 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 24 | - run: npm ci 25 | - run: npm run lint 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | } 13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 14 | // 15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 16 | // from the referenced tsconfig.json - TypeScript does not merge them in 17 | } 18 | -------------------------------------------------------------------------------- /.github/workflows/check.yml: -------------------------------------------------------------------------------- 1 | name: Check 2 | 3 | on: 4 | push: 5 | branches: 6 | - '**' 7 | pull_request: 8 | branches: 9 | - '**' 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: 16.x 20 | - uses: actions/cache@v2 21 | with: 22 | path: ~/.npm 23 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 24 | - run: npm ci 25 | - run: npm run check 26 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], 5 | plugins: ['svelte3', '@typescript-eslint'], 6 | ignorePatterns: ['*.cjs'], 7 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], 8 | settings: { 9 | 'svelte3/typescript': () => require('typescript') 10 | }, 11 | parserOptions: { 12 | sourceType: 'module', 13 | ecmaVersion: 2020 14 | }, 15 | env: { 16 | browser: true, 17 | es2017: true, 18 | node: true 19 | }, 20 | rules: { 21 | '@typescript-eslint/ban-types': 'off', 22 | '@typescript-eslint/no-inferrable-types': 'off' 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /src/lib/types.ts: -------------------------------------------------------------------------------- 1 | export type Direction = 'left' | 'right'; 2 | export type Position = 'top' | 'bottom' | 'left' | 'right'; 3 | export type MouseOrKeyboard = 'mouse' | 'keyboard'; 4 | export type LoadingStrategy = 'eager' | 'lazy'; 5 | 6 | export type TImage = { 7 | srcSet: string; 8 | media: string; 9 | }; 10 | 11 | export type TImageSet = TImage[]; 12 | 13 | export type TItem = Partial<{ 14 | bulletClass: string; 15 | description: string; 16 | original: string; 17 | originalHeight: number; 18 | originalWidth: number; 19 | loading: LoadingStrategy; 20 | thumbnailHeight: number; 21 | thumbnailWidth: number; 22 | thumbnailLoading: LoadingStrategy; 23 | fullscreen: string; 24 | originalAlt: string; 25 | originalTitle: string; 26 | thumbnail: string; 27 | thumbnailAlt: string; 28 | thumbnailLabel: string; 29 | thumbnailTitle: string; 30 | originalClass: string; 31 | thumbnailClass: string; 32 | imageSet: TImageSet[]; 33 | srcset: string; 34 | sizes: string; 35 | }>; 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 react2svelte 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 | -------------------------------------------------------------------------------- /src/lib/Item.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | {originalAlt} dispatch('imageload', event)} 31 | on:error={(event) => dispatch('imageerror', event)} 32 | {loading} 33 | /> 34 | {#if description} 35 | 36 | {description} 37 | 38 | {/if} 39 | -------------------------------------------------------------------------------- /src/lib/SVG.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | {#if icon === 'left'} 18 | 19 | {:else if icon === 'right'} 20 | 21 | {:else if icon === 'maximize'} 22 | 25 | {:else if icon === 'minimize'} 26 | 29 | {:else if icon === 'play'} 30 | 31 | {:else if icon === 'pause'} 32 | 33 | 34 | {/if} 35 | 36 | -------------------------------------------------------------------------------- /src/lib/Thumbnail.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 44 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ['main'] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow one concurrent deployment 19 | concurrency: 20 | group: 'pages' 21 | cancel-in-progress: true 22 | 23 | jobs: 24 | # Single deploy job since we're just deploying 25 | deploy: 26 | environment: 27 | name: github-pages 28 | url: ${{ steps.deployment.outputs.page_url }} 29 | runs-on: ubuntu-latest 30 | steps: 31 | - name: Checkout 32 | uses: actions/checkout@v3 33 | - name: Setup Pages 34 | uses: actions/configure-pages@v2 35 | - name: Setup Node.js environment 36 | uses: actions/setup-node@v3.6.0 37 | - name: install dependencies 38 | run: npm install 39 | - name: build site 40 | run: npm run buildDemo 41 | - name: Upload artifact 42 | uses: actions/upload-pages-artifact@v1 43 | with: 44 | # Upload entire repository 45 | path: './build' 46 | - name: Deploy to GitHub Pages 47 | id: deployment 48 | uses: actions/deploy-pages@v1 49 | -------------------------------------------------------------------------------- /src/lib/app.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["src/app.scss"],"names":[],"mappings":"AAgBA;EACE,OAfS;EAgBT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE,OA1BI;;EA2BJ;IACE;;;AAKN;EAEE;;;AAMA;EACE;;;AAKN;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;;AAGF;EAVF;AAAA;IAWI;;EAEA;AAAA;IACE;IACA;;;AAIJ;EAnBF;AAAA;IAoBI;;EAEA;AAAA;IACE;IACA;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAGF;EACE;AAAA;IACE;IACA;;;AAIJ;EACE;AAAA;IACE;IACA;;;AAIJ;AAAA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAIF;EAtHI;EAAA;EAAA;EAAA;EAAA;EAwHF,6BA7He;EA8Hf;;AAEA;EACE,YApIO;EAqIP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE,YA3JO;;AA8JT;EACE;;AAKA;EACE;;;AAKN;EACE;;AAEA;EAEE;EACA;;AAEA;EALF;IAMI;;;AAGJ;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE,YAjNkB;EAkNlB;EACA,OAtNO;EAuNP;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;IACA;IACA;;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA,YApPQ;EAqPR;EACA;EACA;EACA;EACA;EACA;;AAEA;EAbF;IAcI;IACA;;;AAGF;EAlBF;IAmBI;;;AAGF;EACE;EACA,YA1QI;EA2QJ;;AAGF;EACE;EACA;EACA,YAnRK;;AAsRP;EACE;IACE,YAtRE;IAuRF;;EAGF;IACE,YA3RE;;;;AAiSV;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEF;EAEE;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAMR;EAEE;;AAEA;EAJF;IAKI;;;;AAKN;EACE;EACA;;AAEA;EAJF;IAKI;;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EAEE;EACA;;AAEA;EALF;IAMI;;;AAIJ;EACE;IACE;IACA;;;AAEA;EAJF;IAKI;;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aA/ZU;EAgaV;EACA;EACA;;AAEA;EAdF;IAeI;IACA;;;;AAIJ;EACE,YA7aoB;EA8apB,OAjbS;EAkbT;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVF;IAWI;IACA","file":"app.css"} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@react2svelte/image-gallery", 3 | "version": "1.0.1", 4 | "license": "MIT", 5 | "description": "Svelte image gallery ported from react-image-gallery", 6 | "homepage": "https://react2svelte.github.io/image-gallery/", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/react2svelte/image-gallery" 10 | }, 11 | "scripts": { 12 | "dev": "vite dev", 13 | "build": "svelte-kit sync && svelte-package", 14 | "buildDemo": "vite build", 15 | "prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1", 16 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --use-new-transformation", 17 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 18 | "lint": "prettier --plugin-search-dir . --check . && eslint .", 19 | "format": "prettier --plugin-search-dir . --write ." 20 | }, 21 | "devDependencies": { 22 | "@sveltejs/adapter-static": "^1.0.1", 23 | "@sveltejs/kit": "^1.0.0", 24 | "@sveltejs/package": "^1.0.0", 25 | "@types/throttle-debounce": "^5.0.0", 26 | "@typescript-eslint/eslint-plugin": "^5.45.0", 27 | "@typescript-eslint/parser": "^5.45.0", 28 | "eslint": "^8.28.0", 29 | "eslint-config-prettier": "^8.5.0", 30 | "eslint-plugin-svelte3": "^4.0.0", 31 | "prettier": "^2.8.0", 32 | "prettier-plugin-svelte": "^2.8.1", 33 | "sass": "^1.57.1", 34 | "svelte": "^3.54.0", 35 | "svelte-check": "^2.9.2", 36 | "tslib": "^2.4.1", 37 | "typescript": "^4.9.3", 38 | "vite": "^4.0.0" 39 | }, 40 | "type": "module", 41 | "dependencies": { 42 | "@react2svelte/swipable": "^0.1.4", 43 | "@react2svelte/swipeable": "^0.1.4", 44 | "clsx": "^1.2.1", 45 | "throttle-debounce": "^5.0.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/lib/Slide.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 |
dispatch('click', e)} 32 | on:keyup={handleSlideKeyUp} 33 | on:touchmove={() => dispatch('touchmove')} 34 | on:touchend={() => dispatch('touchend')} 35 | on:touchstart={() => dispatch('touchstart')} 36 | on:mouseover={() => dispatch('mouseover')} 37 | on:focus={() => dispatch('focus')} 38 | on:mouseleave={() => dispatch('mouseleave')} 39 | role="button" 40 | > 41 | {#if showItem} 42 | 57 | {:else} 58 |
59 | {/if} 60 |
61 | -------------------------------------------------------------------------------- /src/routes/+page.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #f4f6f9; 5 | color: #222; 6 | font-family: 'Raleway', sans-serif; 7 | } 8 | 9 | ul, 10 | li { 11 | padding: 0; 12 | margin: 0; 13 | list-style: none; 14 | } 15 | 16 | li { 17 | padding: 3px 0; 18 | display: inline-block; 19 | } 20 | 21 | label { 22 | margin-left: 5px; 23 | } 24 | 25 | .gallery-container { 26 | margin-top: 50px; 27 | } 28 | 29 | .app-header { 30 | letter-spacing: 1px; 31 | text-transform: uppercase; 32 | } 33 | 34 | .play-button { 35 | cursor: pointer; 36 | position: absolute; 37 | left: 0; 38 | top: 0; 39 | bottom: 0; 40 | right: 0; 41 | margin: auto; 42 | height: 60px; 43 | width: 100px; 44 | background-color: rgba(0, 0, 0, 0.7); 45 | border-radius: 5px; 46 | } 47 | 48 | .play-button:hover { 49 | background-color: rgba(0, 0, 0, 0.9); 50 | } 51 | 52 | .play-button:after { 53 | content: ''; 54 | display: block; 55 | position: absolute; 56 | top: 16.5px; 57 | left: 40px; 58 | margin: 0 auto; 59 | border-style: solid; 60 | border-width: 12.5px 0 12.5px 20px; 61 | border-color: transparent transparent transparent rgba(255, 255, 255, 1); 62 | } 63 | 64 | .close-video::before { 65 | content: '✖'; 66 | cursor: pointer; 67 | position: absolute; 68 | right: 0; 69 | top: 0; 70 | font-size: 20px; 71 | padding: 20px; 72 | z-index: 1; 73 | line-height: 0.7; 74 | display: block; 75 | color: #fff; 76 | } 77 | 78 | .video-wrapper { 79 | position: relative; 80 | padding: 33.35% 0; /* 16:9 */ 81 | height: 0; 82 | } 83 | 84 | .video-wrapper iframe { 85 | position: absolute; 86 | top: 0; 87 | left: 0; 88 | width: 100%; 89 | height: 100%; 90 | } 91 | 92 | .app .image-gallery, 93 | .app-sandbox { 94 | margin: 0 auto; 95 | width: 65%; 96 | } 97 | 98 | @media (max-width: 1320px) { 99 | .app-sandbox-content { 100 | padding: 0 20px; 101 | } 102 | } 103 | 104 | .app-sandbox { 105 | margin: 40px auto; 106 | -webkit-user-select: none; 107 | -moz-user-select: none; 108 | -ms-user-select: none; 109 | -o-user-select: none; 110 | user-select: none; 111 | } 112 | 113 | .app-buttons li { 114 | display: block; 115 | } 116 | 117 | @media (max-width: 768px) { 118 | .app-header { 119 | font-size: 20px; 120 | } 121 | 122 | .app-buttons li { 123 | display: block; 124 | margin: 10px 0; 125 | } 126 | 127 | .app-buttons li + li { 128 | padding: 0; 129 | } 130 | 131 | .play-button { 132 | height: 40px; 133 | width: 65px; 134 | } 135 | 136 | .play-button:after { 137 | top: 11px; 138 | left: 27px; 139 | border-width: 8.5px 0 8.5px 12px; 140 | } 141 | 142 | .close-video::before { 143 | font-size: 16px; 144 | padding: 15px; 145 | } 146 | } 147 | 148 | @media (max-width: 1024px) { 149 | .app .image-gallery, 150 | .app-sandbox { 151 | width: 100%; 152 | } 153 | } 154 | 155 | .app-interval-input-group { 156 | display: table; 157 | } 158 | 159 | .app-interval-label { 160 | display: table-cell; 161 | vertical-align: middle; 162 | padding: 6px 12px; 163 | font-size: 14px; 164 | font-weight: 400; 165 | line-height: 1; 166 | color: #555; 167 | text-align: center; 168 | background-color: #eee; 169 | border: 3px solid #ccc; 170 | border-right: none; 171 | border-radius: 4px; 172 | border-top-right-radius: 0; 173 | border-bottom-right-radius: 0; 174 | } 175 | 176 | .app-interval-input { 177 | -webkit-appearance: none; 178 | display: table-cell; 179 | margin: 0; 180 | padding: 9px; 181 | border-radius: 5px; 182 | font-size: 14px; 183 | border: 3px solid #ccc; 184 | background: #fff; 185 | width: 100%; 186 | border-top-left-radius: 0; 187 | border-bottom-left-radius: 0; 188 | } 189 | 190 | input.app-interval-input { 191 | width: 65px; 192 | } 193 | 194 | .app-checkboxes { 195 | margin-top: 10px; 196 | } 197 | 198 | .app-checkboxes li { 199 | display: block; 200 | } 201 | -------------------------------------------------------------------------------- /src/lib/SwipeWrapper.svelte: -------------------------------------------------------------------------------- 1 | 9 | 117 | 118 |
handleSwiping(e.detail)} 122 | on:swiped={(e) => handleSwiped(e.detail)} 123 | > 124 | 125 |
126 | -------------------------------------------------------------------------------- /src/lib/ThumbnailSwipeWrapper.svelte: -------------------------------------------------------------------------------- 1 | 6 | 135 | 136 |
handleThumbnailSwiping(e.detail)} 140 | on:swiped={() => handleOnThumbnailSwiped()} 141 | > 142 | 143 |
144 | -------------------------------------------------------------------------------- /src/lib/ThumbnailWrapper.svelte: -------------------------------------------------------------------------------- 1 | 122 | 123 | { 135 | isSwipingThumbnail = true; 136 | thumbsTranslate = thumbsSwipedTranslate + e.detail; 137 | }} 138 | on:thumbnailswiped={() => { 139 | isSwipingThumbnail = false; 140 | isSwipedThumbnail = true; 141 | thumbsSwipedTranslate = thumbsTranslate; 142 | }} 143 | > 144 |
145 | 167 |
168 | 169 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 46 | 47 |
48 |
49 | 69 | 70 |
71 |
72 |

Settings

73 | 74 |
    75 |
  • 76 |
    77 | Start index 78 | 79 |
    80 |
    • 81 | 82 |
  • 83 |
    84 | Play Interval 85 | 86 |
    87 |
    • 88 | 89 |
  • 90 |
    91 | Slide Duration 92 | 93 |
    94 |
    • 95 | 96 |
  • 97 |
    98 | Thumbnail Bar Position 99 | 105 |
    106 |
    • 107 |
108 | 109 |
    110 |
  • 111 | 112 | 113 |
    • 114 |
  • 115 | 116 | 117 |
    • 118 |
  • 119 | 120 | 121 |
    • 122 |
  • 123 | 124 | 125 |
    • 126 |
  • 127 | 128 | 129 |
    • 130 |
  • 131 | 132 | 133 |
    • 134 |
  • 135 | 136 | 137 |
    • 138 |
  • 139 | 140 | 141 |
    • 142 |
  • 143 | 148 | 149 |
    • 150 |
  • 151 | 152 | 153 |
    • 154 |
  • 155 | 156 | 157 |
    • 158 |
  • 159 | 164 | 165 |
    • 166 |
167 |
168 |
169 |
170 |
171 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @react2svelte/image-gallery 2 | 3 | [![npm version](https://img.shields.io/npm/v/@react2svelte/image-gallery.svg)](https://www.npmjs.com/package/@react2svelte/image-gallery) 4 | 5 | **This is an image gallery for Svelte based on [react-image-gallery](https://github.com/xiaolin/react-image-gallery) v1.2.11. Many thanks to all the contributors of that package for their hard work!** 6 | 7 | ### Live Demo (try it on mobile for swipe support) 8 | 9 | [react2svelte.github.io/image-gallery/](https://react2svelte.github.io/image-gallery/). 10 | 11 | React image gallery is a React component for building image galleries and carousels 12 | 13 | ## Features 14 | 15 | - [x] Mobile swipe gestures (using [@react2svelte/swipable](https://www.npmjs.com/package/@react2svelte/swipable)) 16 | - [x] Thumbnail navigation 17 | - [x] Fullscreen support 18 | - [x] RTL support 19 | - [x] Responsive design 20 | - [x] Tons of customization options (see props below) 21 | - [x] `play`, `pause`, `slide`, `beforeslide`, `screenchange`, `imageload`, `imageerror`, `click` events 22 | 23 | Not yet ported 24 | 25 | - [ ] Custom rendered slides and controls 26 | - [ ] Some events (see below) 27 | 28 | ## Getting started 29 | 30 | Install the library 31 | 32 | ``` 33 | npm i @react2svelte/image-gallery 34 | ``` 35 | 36 | Use it in your component/page 37 | 38 | ```html 39 | 57 | 58 | 59 | ``` 60 | 61 | ### Demo 62 | 63 | You can also have a look at the [demo page](https://react2svelte.github.io/image-gallery/) of the package, it allows setting library settings interactively. To run it locally: 64 | 65 | ``` 66 | git clone https://github.com/react2svelte/image-gallery.git 67 | cd image-gallery 68 | npm install 69 | npm run dev 70 | ``` 71 | 72 | And open http://localhost:5173/ 73 | 74 | ## Props 75 | 76 | - `items`: (required) Array of objects, see example above, 77 | - Available Properties 78 | - `original` - image src url 79 | - `thumbnail` - image thumbnail src url 80 | - `fullscreen` - image for fullscreen (defaults to original) 81 | - `originalHeight` - image height (html5 attribute) 82 | - `originalWidth` - image width (html5 attribute) 83 | - `loading` - image loading. Either "lazy" or "eager" (html5 attribute) 84 | - `thumbnailHeight` - image height (html5 attribute) 85 | - `thumbnailWidth` - image width (html5 attribute) 86 | - `thumbnailLoading` - image loading. Either "lazy" or "eager" (html5 attribute) 87 | - `originalClass` - custom image class 88 | - `thumbnailClass` - custom thumbnail class 89 | - `renderItem` - Function for custom rendering a specific slide (see renderItem below) 90 | - `renderThumbInner` - Function for custom thumbnail renderer (see renderThumbInner below) 91 | - `originalAlt` - image alt 92 | - `thumbnailAlt` - thumbnail image alt 93 | - `originalTitle` - image title 94 | - `thumbnailTitle` - thumbnail image title 95 | - `thumbnailLabel` - label for thumbnail 96 | - `description` - description for image 97 | - `srcSet` - image srcset (html5 attribute) 98 | - `sizes` - image sizes (html5 attribute) 99 | - `bulletClass` - extra class for the bullet of the item 100 | - `infinite`: Boolean, default `true` 101 | - infinite sliding 102 | - `lazyLoad`: Boolean, default `false` 103 | - `showNav`: Boolean, default `true` 104 | - `showThumbnails`: Boolean, default `true` 105 | - `thumbnailPosition`: String, default `bottom` 106 | - available positions: `top, right, bottom, left` 107 | - `showFullscreenButton`: Boolean, default `true` 108 | - `useBrowserFullscreen`: Boolean, default `true` 109 | - if false, fullscreen will be done via css within the browser 110 | - `useTranslate3D`: Boolean, default `true` 111 | - if false, will use `translate` instead of `translate3d` css property to transition slides 112 | - `showPlayButton`: Boolean, default `true` 113 | - `isRTL`: Boolean, default `false` 114 | - if true, gallery's direction will be from right-to-left (to support right-to-left languages) 115 | - `showBullets`: Boolean, default `false` 116 | - `showIndex`: Boolean, default `false` 117 | - `autoPlay`: Boolean, default `false` 118 | - `disableThumbnailScroll`: Boolean, default `false` 119 | - disables the thumbnail container from adjusting 120 | - `disableKeyDown`: Boolean, default `false` 121 | - disables keydown listener for keyboard shortcuts (left arrow, right arrow, esc key) 122 | - `disableSwipe`: Boolean, default `false` 123 | - `disableThumbnailSwipe`: Boolean, default `false` 124 | - `onErrorImageURL`: String, default `undefined` 125 | - an image src pointing to your default image if an image fails to load 126 | - handles both slide image, and thumbnail image 127 | - `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false 128 | - `slideDuration`: Number, default `450` 129 | - transition duration during image slide in milliseconds 130 | - `swipingTransitionDuration`: Number, default `0` 131 | - transition duration while swiping in milliseconds 132 | - `slideInterval`: Number, default `3000` 133 | - `slideOnThumbnailOver`: Boolean, default `false` 134 | - `flickThreshold`: Number (float), default `0.4` 135 | - Determines the max velocity of a swipe before it's considered a flick (lower = more sensitive) 136 | - `swipeThreshold`: Number, default `30` 137 | - A percentage of how far the offset of the current slide is swiped to trigger a slide event. 138 | e.g. If the current slide is swiped less than 30% to the left or right, it will not trigger a slide event. 139 | - `stopPropagation`: Boolean, default `false` 140 | - Automatically calls stopPropagation on all 'swipe' events. 141 | - `startIndex`: Number, default `0` 142 | - `additionalClass`: String, 143 | - Additional class that will be added to the root node of the component. 144 | - `useWindowKeyDown`: Boolean, default `true` 145 | - If `true`, listens to keydown events on window (window.addEventListener) 146 | - If `false`, listens to keydown events on image gallery element (imageGalleryElement.addEventListener) 147 | 148 | ## Functions 149 | 150 | The following functions can be accessed: 151 | 152 | - `play()`: plays the slides 153 | - `pause()`: pauses the slides 154 | - `fullScreen()`: activates full screen 155 | - `exitFullScreen()`: deactivates full screen 156 | - `slideToIndex(index)`: slides to a specific index 157 | - `getCurrentIndex()`: returns the current index 158 | 159 | ## Events 160 | 161 | Already supported 162 | 163 | - [x] `slide`: Function, `details: { currentIndex: number }` 164 | - [x] `beforeslide`: Function, `details: { nextIndex: number }` 165 | - [x] `screenchange`: Function, `details: { fullscreen: boolean }` 166 | - When fullscreen is toggled a boolean is passed to the callback 167 | - [x] `pause`: Function, `details: { currentIndex: number }` 168 | - [x] `play`: Function, `details: { currentIndex: number }` 169 | - [x] `imageload`: Function, `details: { index: number, event }` 170 | - [x] `imageerror`: Function, `details: { index: number, event }` 171 | - [x] `click`: Function, `details: event` 172 | 173 | Not yet supported 174 | 175 | - [ ] `onThumbnailError`: Function, `callback(event)` 176 | - overrides onErrorImage 177 | - [ ] `onThumbnailClick`: Function, `callback(event, index)` 178 | - [ ] `onTouchMove`: Function, `callback(event) on gallery slide` 179 | - [ ] `onTouchEnd`: Function, `callback(event) on gallery slide` 180 | - [ ] `onTouchStart`: Function, `callback(event) on gallery slide` 181 | - [ ] `onMouseOver`: Function, `callback(event) on gallery slide` 182 | - [ ] `onMouseLeave`: Function, `callback(event) on gallery slide` 183 | 184 | ## Custom Controls 185 | 186 | `react-image-gallery` supports rendering custom controls, this feature has not been ported yet. 187 | 188 | ## License 189 | 190 | MIT 191 | -------------------------------------------------------------------------------- /src/lib/SlideWrapper.svelte: -------------------------------------------------------------------------------- 1 | 137 | 138 |
139 | 140 | 141 | 142 | {#if canSlide} 143 | {#if showNav} 144 | dispatch('slideleft')} disabled={!canSlideLeft} /> 145 | dispatch('slideright')} disabled={!canSlideRight} /> 146 | {/if} 147 | { 158 | isSwiping = true; 159 | currentSlideOffset = e.detail; 160 | }} 161 | on:swipeend={() => { 162 | isSwiping = false; 163 | currentSlideOffset = 0; 164 | }} 165 | on:swipeleft={() => { 166 | dispatch('slideleft'); 167 | }} 168 | on:swiperight={() => { 169 | dispatch('slideright'); 170 | }} 171 | > 172 |
173 | {#each items as item, index} 174 | dispatch('imageload', { index, event })} 183 | on:imageerror={(event) => dispatch('imageerror', { index, event })} 184 | on:click 185 | /> 186 | {/each} 187 |
188 | 189 | {:else} 190 |
191 | {#each items as item, index} 192 | dispatch('imageload', { index, event })} 201 | on:imageerror={(event) => dispatch('imageerror', { index, event })} 202 | on:click 203 | /> 204 | {/each} 205 |
206 | {/if} 207 | 208 | 209 | {#if showPlayButton} 210 | dispatch('playtoggle')} {isPlaying} /> 211 | {/if} 212 | 213 | 214 | {#if showBullets} 215 |
216 | 226 |
227 | {/if} 228 | 229 | 230 | {#if showFullscreenButton} 231 | dispatch('fullscreentoggle')} {isFullscreen} /> 232 | {/if} 233 | 234 | 235 | {#if showIndex} 236 |
237 | 238 | {currentIndex + 1} 239 | 240 | 241 | {indexSeparator} 242 | 243 | 244 | {items.length} 245 | 246 |
247 | {/if} 248 |
249 | -------------------------------------------------------------------------------- /src/lib/styling.ts: -------------------------------------------------------------------------------- 1 | import type { MouseOrKeyboard, Position } from '$lib/types'; 2 | import clsx from 'clsx'; 3 | 4 | export const getThumbnailPositionClassName = (thumbnailPosition: Position) => { 5 | return ` image-gallery-thumbnails-${thumbnailPosition}`; 6 | }; 7 | 8 | export const getThumbsTranslate = ( 9 | thumbsElement: HTMLElement, 10 | indexDifference: number, 11 | disableThumbnailScroll: boolean, 12 | thumbnailsWrapperWidth: number, 13 | thumbnailsWrapperHeight: number, 14 | isThumbnailVertical: boolean, 15 | numberItems: number 16 | ) => { 17 | // the scroll space that is hidden on the left & right / top & bottom 18 | // when the screen is not large enough to fit all thumbnails 19 | let hiddenScroll; 20 | 21 | if (disableThumbnailScroll) return 0; 22 | 23 | if (thumbsElement) { 24 | // total scroll required to see the last thumbnail 25 | if (isThumbnailVertical) { 26 | if (thumbsElement.scrollHeight <= thumbnailsWrapperHeight) { 27 | return 0; 28 | } 29 | hiddenScroll = thumbsElement.scrollHeight - thumbnailsWrapperHeight; 30 | } else { 31 | if (thumbsElement.scrollWidth <= thumbnailsWrapperWidth || thumbnailsWrapperWidth <= 0) { 32 | return 0; 33 | } 34 | hiddenScroll = thumbsElement.scrollWidth - thumbnailsWrapperWidth; 35 | } 36 | 37 | // scroll-x or y required per index change 38 | const perIndexScroll = hiddenScroll / (numberItems - 1); 39 | return indexDifference * perIndexScroll; 40 | } 41 | return 0; 42 | }; 43 | 44 | export const getTranslateXForTwoSlide = ( 45 | index: number, 46 | currentIndex: number, 47 | currentSlideOffset: number, 48 | previousIndex: number 49 | ) => { 50 | // For taking care of infinite swipe when there are only two slides\ 51 | const indexChanged = currentIndex !== previousIndex; 52 | const firstSlideWasPrevSlide = index === 0 && previousIndex === 0; 53 | const secondSlideWasPrevSlide = index === 1 && previousIndex === 1; 54 | const firstSlideIsNextSlide = index === 0 && currentIndex === 1; 55 | const secondSlideIsNextSlide = index === 1 && currentIndex === 0; 56 | const swipingEnded = currentSlideOffset === 0; 57 | const baseTranslateX = -100 * currentIndex; 58 | let translateX = baseTranslateX + index * 100 + currentSlideOffset; 59 | 60 | // keep track of user swiping direction 61 | // important to understand how to translateX based on last direction 62 | let direction; 63 | if (currentSlideOffset > 0) { 64 | direction = 'left'; 65 | } else { 66 | // TODO The original code stores the direction in a class variable 67 | // and sets the direction only to right if currentSlideOffset < 0 68 | direction = 'right'; 69 | } 70 | 71 | // when swiping between two slides make sure the next and prev slides 72 | // are on both left and right 73 | if (secondSlideIsNextSlide && currentSlideOffset > 0) { 74 | // swiping right 75 | translateX = -100 + currentSlideOffset; 76 | } 77 | if (firstSlideIsNextSlide && currentSlideOffset < 0) { 78 | // swiping left 79 | translateX = 100 + currentSlideOffset; 80 | } 81 | 82 | if (indexChanged) { 83 | // when indexChanged move the slide to the correct side 84 | if (firstSlideWasPrevSlide && swipingEnded && direction === 'left') { 85 | translateX = 100; 86 | } else if (secondSlideWasPrevSlide && swipingEnded && direction === 'right') { 87 | translateX = -100; 88 | } 89 | } else { 90 | // keep the slide on the correct side if the swipe was not successful 91 | if (secondSlideIsNextSlide && swipingEnded && direction === 'left') { 92 | translateX = -100; 93 | } 94 | if (firstSlideIsNextSlide && swipingEnded && direction === 'right') { 95 | translateX = 100; 96 | } 97 | } 98 | 99 | return translateX; 100 | }; 101 | 102 | export const getIgClass = ( 103 | modalFullscreen: boolean, 104 | additionalClass: string, 105 | currentlyUsingMouseOrKeyboard: MouseOrKeyboard 106 | ) => { 107 | return clsx('image-gallery', additionalClass, { 108 | 'fullscreen-modal': modalFullscreen, 109 | 'image-gallery-using-mouse': currentlyUsingMouseOrKeyboard === 'mouse' 110 | }); 111 | }; 112 | 113 | export const getIgContentClass = (isFullscreen: boolean, thumbnailPosition: Position) => { 114 | return clsx('image-gallery-content', getThumbnailPositionClassName(thumbnailPosition), { 115 | fullscreen: isFullscreen 116 | }); 117 | }; 118 | 119 | export const getSlideWrapperClass = (isRTL: boolean, thumbnailPosition: Position) => { 120 | return clsx('image-gallery-slide-wrapper', getThumbnailPositionClassName(thumbnailPosition), { 121 | 'image-gallery-rtl': isRTL 122 | }); 123 | }; 124 | 125 | export const getSlideStyle = ( 126 | index: number, 127 | currentIndex: number, 128 | previousIndex: number, 129 | numberItems: number, 130 | isRTL: boolean, 131 | currentSlideOffset: number, 132 | infinite: boolean, 133 | isSlideVisible: boolean, 134 | transitionStyle: string, 135 | useTranslate3D: boolean 136 | ) => { 137 | const baseTranslateX = -100 * currentIndex; 138 | const totalSlides = numberItems - 1; 139 | 140 | // calculates where the other slides belong based on currentIndex 141 | // if it is RTL the base line should be reversed 142 | let translateX = (baseTranslateX + index * 100) * (isRTL ? -1 : 1) + currentSlideOffset; 143 | 144 | if (infinite && numberItems > 2) { 145 | if (currentIndex === 0 && index === totalSlides) { 146 | // make the last slide the slide before the first 147 | // if it is RTL the base line should be reversed 148 | translateX = -100 * (isRTL ? -1 : 1) + currentSlideOffset; 149 | } else if (currentIndex === totalSlides && index === 0) { 150 | // make the first slide the slide after the last 151 | // if it is RTL the base line should be reversed 152 | translateX = 100 * (isRTL ? -1 : 1) + currentSlideOffset; 153 | } 154 | } 155 | 156 | // Special case when there are only 2 items with infinite on 157 | if (infinite && numberItems === 2) { 158 | translateX = getTranslateXForTwoSlide(index, currentIndex, currentSlideOffset, previousIndex); 159 | } 160 | 161 | let translate = `translate(${translateX}%, 0)`; 162 | 163 | if (useTranslate3D) { 164 | translate = `translate3d(${translateX}%, 0, 0)`; 165 | } 166 | 167 | return ` 168 | display: ${isSlideVisible ? 'inherit' : 'none'}; 169 | WebkitTransform: ${translate}; 170 | MozTransform: ${translate}; 171 | msTransform: ${translate}; 172 | OTransform: ${translate}; 173 | transform: ${translate}; 174 | transition: ${transitionStyle}; 175 | `; 176 | }; 177 | 178 | export const getBulletStyle = (index: number, currentIndex: number, itemBulletClass?: string) => { 179 | return clsx('image-gallery-bullet', itemBulletClass, { active: currentIndex === index }); 180 | }; 181 | 182 | export const getAlignmentClassName = ( 183 | index: number, 184 | currentIndex: number, 185 | infinite: boolean, 186 | numberItems: number 187 | ) => { 188 | // Necessary for lazing loading 189 | let alignment = ''; 190 | const leftClassName = 'image-gallery-left'; 191 | const centerClassName = 'image-gallery-center'; 192 | const rightClassName = 'image-gallery-right'; 193 | 194 | switch (index) { 195 | case currentIndex - 1: 196 | alignment = ` ${leftClassName}`; 197 | break; 198 | case currentIndex: 199 | alignment = ` ${centerClassName}`; 200 | break; 201 | case currentIndex + 1: 202 | alignment = ` ${rightClassName}`; 203 | break; 204 | default: 205 | break; 206 | } 207 | 208 | if (numberItems >= 3 && infinite) { 209 | if (index === 0 && currentIndex === numberItems - 1) { 210 | // set first slide as right slide if were sliding right from last slide 211 | alignment = ` ${rightClassName}`; 212 | } else if (index === numberItems - 1 && currentIndex === 0) { 213 | // set last slide as left slide if were sliding left from first slide 214 | alignment = ` ${leftClassName}`; 215 | } 216 | } 217 | 218 | return alignment; 219 | }; 220 | 221 | export const getThumbnailStyle = ( 222 | isRTL: boolean, 223 | thumbsTranslate: number, 224 | isThumbnailVertical: boolean, 225 | useTranslate3D: boolean, 226 | thumbsStyle: string 227 | ) => { 228 | let translate; 229 | const verticalTranslateValue = isRTL ? thumbsTranslate * -1 : thumbsTranslate; 230 | 231 | if (isThumbnailVertical) { 232 | translate = `translate(0, ${thumbsTranslate}px)`; 233 | if (useTranslate3D) { 234 | translate = `translate3d(0, ${thumbsTranslate}px, 0)`; 235 | } 236 | } else { 237 | translate = `translate(${verticalTranslateValue}px, 0)`; 238 | if (useTranslate3D) { 239 | translate = `translate3d(${verticalTranslateValue}px, 0, 0)`; 240 | } 241 | } 242 | return ` 243 | WebkitTransform: ${translate}; 244 | MozTransform: ${translate}; 245 | msTransform: ${translate}; 246 | OTransform: ${translate}; 247 | transform: ${translate}; 248 | ${thumbsStyle} 249 | `; 250 | }; 251 | 252 | export const getIgThumbnailClass = ( 253 | index: number, 254 | currentIndex: number, 255 | thumbnailClass: string | undefined 256 | ) => { 257 | return clsx('image-gallery-thumbnail', thumbnailClass, { active: currentIndex === index }); 258 | }; 259 | -------------------------------------------------------------------------------- /src/lib/app.scss: -------------------------------------------------------------------------------- 1 | $ig-small-screen: 768px !default; 2 | $ig-xsmall-screen: 480px !default; 3 | $ig-white: #fff !default; 4 | $ig-black: #000 !default; 5 | $ig-blue: #337ab7 !default; 6 | $ig-background-black: rgba(0, 0, 0, 0.4) !default; 7 | $ig-transparent: rgba(0, 0, 0, 0) !default; 8 | $ig-shadow: 0 2px 2px lighten($ig-black, 10%); 9 | 10 | @mixin vendor-prefix($name, $value) { 11 | @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') { 12 | #{$vendor}#{$name}: #{$value}; 13 | } 14 | } 15 | 16 | // SVG ICON STYLES 17 | .image-gallery-icon { 18 | color: $ig-white; 19 | transition: all 0.3s ease-out; 20 | appearance: none; 21 | background-color: transparent; 22 | border: 0; 23 | cursor: pointer; 24 | outline: none; 25 | position: absolute; 26 | z-index: 4; 27 | filter: drop-shadow($ig-shadow); 28 | 29 | @media (hover: hover) and (pointer: fine) { 30 | &:hover { 31 | color: $ig-blue; 32 | .image-gallery-svg { 33 | transform: scale(1.1); 34 | } 35 | } 36 | } 37 | 38 | &:focus { 39 | // a11y support 40 | outline: 2px solid $ig-blue; 41 | } 42 | } 43 | 44 | .image-gallery-using-mouse { 45 | .image-gallery-icon { 46 | &:focus { 47 | outline: none; 48 | } 49 | } 50 | } 51 | 52 | .image-gallery-fullscreen-button, 53 | .image-gallery-play-button { 54 | bottom: 0; 55 | padding: 20px; 56 | 57 | .image-gallery-svg { 58 | height: 28px; 59 | width: 28px; 60 | } 61 | 62 | @media (max-width: $ig-small-screen) { 63 | padding: 15px; 64 | 65 | .image-gallery-svg { 66 | height: 24px; 67 | width: 24px; 68 | } 69 | } 70 | 71 | @media (max-width: $ig-xsmall-screen) { 72 | padding: 10px; 73 | 74 | .image-gallery-svg { 75 | height: 16px; 76 | width: 16px; 77 | } 78 | } 79 | } 80 | 81 | .image-gallery-fullscreen-button { 82 | right: 0; 83 | } 84 | 85 | .image-gallery-play-button { 86 | left: 0; 87 | } 88 | 89 | .image-gallery-left-nav, 90 | .image-gallery-right-nav { 91 | padding: 50px 10px; 92 | top: 50%; 93 | transform: translateY(-50%); 94 | 95 | .image-gallery-svg { 96 | height: 120px; 97 | width: 60px; 98 | } 99 | 100 | @media (max-width: $ig-small-screen) { 101 | .image-gallery-svg { 102 | height: 72px; 103 | width: 36px; 104 | } 105 | } 106 | 107 | @media (max-width: $ig-xsmall-screen) { 108 | .image-gallery-svg { 109 | height: 48px; 110 | width: 24px; 111 | } 112 | } 113 | 114 | &[disabled] { 115 | cursor: disabled; 116 | opacity: 0.6; 117 | pointer-events: none; 118 | } 119 | } 120 | 121 | .image-gallery-left-nav { 122 | left: 0; 123 | } 124 | 125 | .image-gallery-right-nav { 126 | right: 0; 127 | } 128 | // End of Icon styles 129 | 130 | .image-gallery { 131 | @include vendor-prefix('user-select', none); 132 | -webkit-tap-highlight-color: $ig-transparent; 133 | position: relative; 134 | 135 | &.fullscreen-modal { 136 | background: $ig-black; 137 | bottom: 0; 138 | height: 100%; 139 | left: 0; 140 | position: fixed; 141 | right: 0; 142 | top: 0; 143 | width: 100%; 144 | z-index: 5; 145 | 146 | .image-gallery-content { 147 | top: 50%; 148 | transform: translateY(-50%); 149 | } 150 | } 151 | } 152 | 153 | .image-gallery-content { 154 | position: relative; 155 | line-height: 0; 156 | top: 0; 157 | 158 | &.fullscreen { 159 | background: $ig-black; 160 | } 161 | 162 | .image-gallery-slide .image-gallery-image { 163 | max-height: calc(100vh - 80px); // 80 px for the thumbnail space 164 | } 165 | 166 | &.image-gallery-thumbnails-left, 167 | &.image-gallery-thumbnails-right { 168 | .image-gallery-slide .image-gallery-image { 169 | max-height: 100vh; 170 | } 171 | } 172 | } 173 | 174 | .image-gallery-slide-wrapper { 175 | position: relative; 176 | 177 | &.image-gallery-thumbnails-left, 178 | &.image-gallery-thumbnails-right { 179 | display: inline-block; 180 | width: calc(100% - 115px); // 100px + 15px for margin 181 | 182 | @media (max-width: $ig-small-screen) { 183 | width: calc(100% - 92px); // 81px + 11px for margin 184 | } 185 | } 186 | &.image-gallery-rtl { 187 | direction: rtl; 188 | } 189 | } 190 | 191 | .image-gallery-slides { 192 | line-height: 0; 193 | overflow: hidden; 194 | position: relative; 195 | white-space: nowrap; 196 | text-align: center; 197 | } 198 | 199 | .image-gallery-slide { 200 | left: 0; 201 | position: absolute; 202 | top: 0; 203 | width: 100%; 204 | 205 | &.image-gallery-center { 206 | position: relative; 207 | } 208 | 209 | .image-gallery-image { 210 | width: 100%; 211 | object-fit: contain; 212 | } 213 | 214 | .image-gallery-description { 215 | background: $ig-background-black; 216 | bottom: 70px; 217 | color: $ig-white; 218 | left: 0; 219 | line-height: 1; 220 | padding: 10px 20px; 221 | position: absolute; 222 | white-space: normal; 223 | 224 | @media (max-width: $ig-small-screen) { 225 | bottom: 45px; 226 | font-size: 0.8em; 227 | padding: 8px 15px; 228 | } 229 | } 230 | } 231 | 232 | .image-gallery-bullets { 233 | bottom: 20px; 234 | left: 0; 235 | margin: 0 auto; 236 | position: absolute; 237 | right: 0; 238 | width: 80%; 239 | z-index: 4; 240 | 241 | .image-gallery-bullets-container { 242 | margin: 0; 243 | padding: 0; 244 | text-align: center; 245 | } 246 | 247 | .image-gallery-bullet { 248 | appearance: none; 249 | background-color: transparent; 250 | border: 1px solid $ig-white; 251 | border-radius: 50%; 252 | box-shadow: $ig-shadow; 253 | cursor: pointer; 254 | display: inline-block; 255 | margin: 0 5px; 256 | outline: none; 257 | padding: 5px; 258 | transition: all 0.2s ease-out; 259 | 260 | @media (max-width: $ig-small-screen) { 261 | margin: 0 3px; 262 | padding: 3px; 263 | } 264 | 265 | @media (max-width: $ig-xsmall-screen) { 266 | padding: 2.7px; 267 | } 268 | 269 | &:focus { 270 | transform: scale(1.2); 271 | background: $ig-blue; 272 | border: 1px solid $ig-blue; 273 | } 274 | 275 | &.active { 276 | transform: scale(1.2); 277 | border: 1px solid $ig-white; 278 | background: $ig-white; 279 | } 280 | 281 | @media (hover: hover) and (pointer: fine) { 282 | &:hover { 283 | background: $ig-blue; 284 | border: 1px solid $ig-blue; 285 | } 286 | 287 | &.active:hover { 288 | background: $ig-blue; 289 | } 290 | } 291 | } 292 | } 293 | 294 | .image-gallery-thumbnails-wrapper { 295 | position: relative; 296 | 297 | &.thumbnails-swipe-horizontal { 298 | touch-action: pan-y; 299 | } 300 | 301 | &.thumbnails-swipe-vertical { 302 | touch-action: pan-x; 303 | } 304 | 305 | &.thumbnails-wrapper-rtl { 306 | direction: rtl; 307 | } 308 | &.image-gallery-thumbnails-left, 309 | &.image-gallery-thumbnails-right { 310 | display: inline-block; 311 | vertical-align: top; 312 | width: 100px; 313 | 314 | @media (max-width: $ig-small-screen) { 315 | width: 81px; // 75px + 6px for border 316 | } 317 | 318 | .image-gallery-thumbnails { 319 | height: 100%; 320 | width: 100%; 321 | left: 0; 322 | padding: 0; 323 | position: absolute; 324 | top: 0; 325 | 326 | .image-gallery-thumbnail { 327 | display: block; 328 | margin-right: 0; 329 | padding: 0; 330 | 331 | + .image-gallery-thumbnail { 332 | margin-left: 0; 333 | margin-top: 2px; 334 | } 335 | } 336 | } 337 | } 338 | 339 | &.image-gallery-thumbnails-left, 340 | &.image-gallery-thumbnails-right { 341 | margin: 0 5px; 342 | 343 | @media (max-width: $ig-small-screen) { 344 | margin: 0 3px; 345 | } 346 | } 347 | } 348 | 349 | .image-gallery-thumbnails { 350 | overflow: hidden; 351 | padding: 5px 0; 352 | 353 | @media (max-width: $ig-small-screen) { 354 | padding: 3px 0; 355 | } 356 | 357 | .image-gallery-thumbnails-container { 358 | cursor: pointer; 359 | text-align: center; 360 | white-space: nowrap; 361 | } 362 | } 363 | 364 | .image-gallery-thumbnail { 365 | display: inline-block; 366 | border: 4px solid transparent; 367 | transition: border 0.3s ease-out; 368 | width: 100px; 369 | background: transparent; 370 | padding: 0; 371 | 372 | @media (max-width: $ig-small-screen) { 373 | border: 3px solid transparent; 374 | width: 81px; 375 | } 376 | 377 | + .image-gallery-thumbnail { 378 | margin-left: 2px; 379 | } 380 | 381 | .image-gallery-thumbnail-inner { 382 | display: block; 383 | position: relative; 384 | } 385 | 386 | .image-gallery-thumbnail-image { 387 | vertical-align: middle; 388 | width: 100%; 389 | line-height: 0; 390 | } 391 | 392 | &.active, 393 | &:focus { 394 | outline: none; 395 | border: 4px solid $ig-blue; 396 | 397 | @media (max-width: $ig-small-screen) { 398 | border: 3px solid $ig-blue; 399 | } 400 | } 401 | 402 | @media (hover: hover) and (pointer: fine) { 403 | &:hover { 404 | outline: none; 405 | border: 4px solid $ig-blue; 406 | 407 | @media (max-width: $ig-small-screen) { 408 | border: 3px solid $ig-blue; 409 | } 410 | } 411 | } 412 | } 413 | 414 | .image-gallery-thumbnail-label { 415 | box-sizing: border-box; 416 | color: white; 417 | font-size: 1em; 418 | left: 0; 419 | line-height: 1em; 420 | padding: 5%; 421 | position: absolute; 422 | top: 50%; 423 | text-shadow: $ig-shadow; 424 | transform: translateY(-50%); 425 | white-space: normal; 426 | width: 100%; 427 | 428 | @media (max-width: $ig-small-screen) { 429 | font-size: 0.8em; 430 | line-height: 0.8em; 431 | } 432 | } 433 | 434 | .image-gallery-index { 435 | background: $ig-background-black; 436 | color: $ig-white; 437 | line-height: 1; 438 | padding: 10px 20px; 439 | position: absolute; 440 | right: 0; 441 | top: 0; 442 | z-index: 4; 443 | 444 | @media (max-width: $ig-small-screen) { 445 | font-size: 0.8em; 446 | padding: 5px 10px; 447 | } 448 | } 449 | -------------------------------------------------------------------------------- /src/lib/app.css: -------------------------------------------------------------------------------- 1 | .image-gallery-icon { 2 | color: #fff; 3 | transition: all 0.3s ease-out; 4 | appearance: none; 5 | background-color: transparent; 6 | border: 0; 7 | cursor: pointer; 8 | outline: none; 9 | position: absolute; 10 | z-index: 4; 11 | filter: drop-shadow(0 2px 2px #1a1a1a); 12 | } 13 | @media (hover: hover) and (pointer: fine) { 14 | .image-gallery-icon:hover { 15 | color: #337ab7; 16 | } 17 | .image-gallery-icon:hover .image-gallery-svg { 18 | transform: scale(1.1); 19 | } 20 | } 21 | .image-gallery-icon:focus { 22 | outline: 2px solid #337ab7; 23 | } 24 | 25 | .image-gallery-using-mouse .image-gallery-icon:focus { 26 | outline: none; 27 | } 28 | 29 | .image-gallery-fullscreen-button, 30 | .image-gallery-play-button { 31 | bottom: 0; 32 | padding: 20px; 33 | } 34 | .image-gallery-fullscreen-button .image-gallery-svg, 35 | .image-gallery-play-button .image-gallery-svg { 36 | height: 28px; 37 | width: 28px; 38 | } 39 | @media (max-width: 768px) { 40 | .image-gallery-fullscreen-button, 41 | .image-gallery-play-button { 42 | padding: 15px; 43 | } 44 | .image-gallery-fullscreen-button .image-gallery-svg, 45 | .image-gallery-play-button .image-gallery-svg { 46 | height: 24px; 47 | width: 24px; 48 | } 49 | } 50 | @media (max-width: 480px) { 51 | .image-gallery-fullscreen-button, 52 | .image-gallery-play-button { 53 | padding: 10px; 54 | } 55 | .image-gallery-fullscreen-button .image-gallery-svg, 56 | .image-gallery-play-button .image-gallery-svg { 57 | height: 16px; 58 | width: 16px; 59 | } 60 | } 61 | 62 | .image-gallery-fullscreen-button { 63 | right: 0; 64 | } 65 | 66 | .image-gallery-play-button { 67 | left: 0; 68 | } 69 | 70 | .image-gallery-left-nav, 71 | .image-gallery-right-nav { 72 | padding: 50px 10px; 73 | top: 50%; 74 | transform: translateY(-50%); 75 | } 76 | .image-gallery-left-nav .image-gallery-svg, 77 | .image-gallery-right-nav .image-gallery-svg { 78 | height: 120px; 79 | width: 60px; 80 | } 81 | @media (max-width: 768px) { 82 | .image-gallery-left-nav .image-gallery-svg, 83 | .image-gallery-right-nav .image-gallery-svg { 84 | height: 72px; 85 | width: 36px; 86 | } 87 | } 88 | @media (max-width: 480px) { 89 | .image-gallery-left-nav .image-gallery-svg, 90 | .image-gallery-right-nav .image-gallery-svg { 91 | height: 48px; 92 | width: 24px; 93 | } 94 | } 95 | .image-gallery-left-nav[disabled], 96 | .image-gallery-right-nav[disabled] { 97 | cursor: disabled; 98 | opacity: 0.6; 99 | pointer-events: none; 100 | } 101 | 102 | .image-gallery-left-nav { 103 | left: 0; 104 | } 105 | 106 | .image-gallery-right-nav { 107 | right: 0; 108 | } 109 | 110 | .image-gallery { 111 | -webkit-user-select: none; 112 | -moz-user-select: none; 113 | -ms-user-select: none; 114 | -o-user-select: none; 115 | user-select: none; 116 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 117 | position: relative; 118 | } 119 | .image-gallery.fullscreen-modal { 120 | background: #000; 121 | bottom: 0; 122 | height: 100%; 123 | left: 0; 124 | position: fixed; 125 | right: 0; 126 | top: 0; 127 | width: 100%; 128 | z-index: 5; 129 | } 130 | .image-gallery.fullscreen-modal .image-gallery-content { 131 | top: 50%; 132 | transform: translateY(-50%); 133 | } 134 | 135 | .image-gallery-content { 136 | position: relative; 137 | line-height: 0; 138 | top: 0; 139 | } 140 | .image-gallery-content.fullscreen { 141 | background: #000; 142 | } 143 | .image-gallery-content .image-gallery-slide .image-gallery-image { 144 | max-height: calc(100vh - 80px); 145 | } 146 | .image-gallery-content.image-gallery-thumbnails-left .image-gallery-slide .image-gallery-image, 147 | .image-gallery-content.image-gallery-thumbnails-right .image-gallery-slide .image-gallery-image { 148 | max-height: 100vh; 149 | } 150 | 151 | .image-gallery-slide-wrapper { 152 | position: relative; 153 | } 154 | .image-gallery-slide-wrapper.image-gallery-thumbnails-left, 155 | .image-gallery-slide-wrapper.image-gallery-thumbnails-right { 156 | display: inline-block; 157 | width: calc(100% - 115px); 158 | } 159 | @media (max-width: 768px) { 160 | .image-gallery-slide-wrapper.image-gallery-thumbnails-left, 161 | .image-gallery-slide-wrapper.image-gallery-thumbnails-right { 162 | width: calc(100% - 92px); 163 | } 164 | } 165 | .image-gallery-slide-wrapper.image-gallery-rtl { 166 | direction: rtl; 167 | } 168 | 169 | .image-gallery-slides { 170 | line-height: 0; 171 | overflow: hidden; 172 | position: relative; 173 | white-space: nowrap; 174 | text-align: center; 175 | } 176 | 177 | .image-gallery-slide { 178 | left: 0; 179 | position: absolute; 180 | top: 0; 181 | width: 100%; 182 | } 183 | .image-gallery-slide.image-gallery-center { 184 | position: relative; 185 | } 186 | .image-gallery-slide .image-gallery-image { 187 | width: 100%; 188 | object-fit: contain; 189 | } 190 | .image-gallery-slide .image-gallery-description { 191 | background: rgba(0, 0, 0, 0.4); 192 | bottom: 70px; 193 | color: #fff; 194 | left: 0; 195 | line-height: 1; 196 | padding: 10px 20px; 197 | position: absolute; 198 | white-space: normal; 199 | } 200 | @media (max-width: 768px) { 201 | .image-gallery-slide .image-gallery-description { 202 | bottom: 45px; 203 | font-size: 0.8em; 204 | padding: 8px 15px; 205 | } 206 | } 207 | 208 | .image-gallery-bullets { 209 | bottom: 20px; 210 | left: 0; 211 | margin: 0 auto; 212 | position: absolute; 213 | right: 0; 214 | width: 80%; 215 | z-index: 4; 216 | } 217 | .image-gallery-bullets .image-gallery-bullets-container { 218 | margin: 0; 219 | padding: 0; 220 | text-align: center; 221 | } 222 | .image-gallery-bullets .image-gallery-bullet { 223 | appearance: none; 224 | background-color: transparent; 225 | border: 1px solid #fff; 226 | border-radius: 50%; 227 | box-shadow: 0 2px 2px #1a1a1a; 228 | cursor: pointer; 229 | display: inline-block; 230 | margin: 0 5px; 231 | outline: none; 232 | padding: 5px; 233 | transition: all 0.2s ease-out; 234 | } 235 | @media (max-width: 768px) { 236 | .image-gallery-bullets .image-gallery-bullet { 237 | margin: 0 3px; 238 | padding: 3px; 239 | } 240 | } 241 | @media (max-width: 480px) { 242 | .image-gallery-bullets .image-gallery-bullet { 243 | padding: 2.7px; 244 | } 245 | } 246 | .image-gallery-bullets .image-gallery-bullet:focus { 247 | transform: scale(1.2); 248 | background: #337ab7; 249 | border: 1px solid #337ab7; 250 | } 251 | .image-gallery-bullets .image-gallery-bullet.active { 252 | transform: scale(1.2); 253 | border: 1px solid #fff; 254 | background: #fff; 255 | } 256 | @media (hover: hover) and (pointer: fine) { 257 | .image-gallery-bullets .image-gallery-bullet:hover { 258 | background: #337ab7; 259 | border: 1px solid #337ab7; 260 | } 261 | .image-gallery-bullets .image-gallery-bullet.active:hover { 262 | background: #337ab7; 263 | } 264 | } 265 | 266 | .image-gallery-thumbnails-wrapper { 267 | position: relative; 268 | } 269 | .image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal { 270 | touch-action: pan-y; 271 | } 272 | .image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical { 273 | touch-action: pan-x; 274 | } 275 | .image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl { 276 | direction: rtl; 277 | } 278 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left, 279 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right { 280 | display: inline-block; 281 | vertical-align: top; 282 | width: 100px; 283 | } 284 | @media (max-width: 768px) { 285 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left, 286 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right { 287 | width: 81px; 288 | } 289 | } 290 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails, 291 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails { 292 | height: 100%; 293 | width: 100%; 294 | left: 0; 295 | padding: 0; 296 | position: absolute; 297 | top: 0; 298 | } 299 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left 300 | .image-gallery-thumbnails 301 | .image-gallery-thumbnail, 302 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right 303 | .image-gallery-thumbnails 304 | .image-gallery-thumbnail { 305 | display: block; 306 | margin-right: 0; 307 | padding: 0; 308 | } 309 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left 310 | .image-gallery-thumbnails 311 | .image-gallery-thumbnail 312 | + .image-gallery-thumbnail, 313 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right 314 | .image-gallery-thumbnails 315 | .image-gallery-thumbnail 316 | + .image-gallery-thumbnail { 317 | margin-left: 0; 318 | margin-top: 2px; 319 | } 320 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left, 321 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right { 322 | margin: 0 5px; 323 | } 324 | @media (max-width: 768px) { 325 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left, 326 | .image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right { 327 | margin: 0 3px; 328 | } 329 | } 330 | 331 | .image-gallery-thumbnails { 332 | overflow: hidden; 333 | padding: 5px 0; 334 | } 335 | @media (max-width: 768px) { 336 | .image-gallery-thumbnails { 337 | padding: 3px 0; 338 | } 339 | } 340 | .image-gallery-thumbnails .image-gallery-thumbnails-container { 341 | cursor: pointer; 342 | text-align: center; 343 | white-space: nowrap; 344 | } 345 | 346 | .image-gallery-thumbnail { 347 | display: inline-block; 348 | border: 4px solid transparent; 349 | transition: border 0.3s ease-out; 350 | width: 100px; 351 | background: transparent; 352 | padding: 0; 353 | } 354 | @media (max-width: 768px) { 355 | .image-gallery-thumbnail { 356 | border: 3px solid transparent; 357 | width: 81px; 358 | } 359 | } 360 | .image-gallery-thumbnail + .image-gallery-thumbnail { 361 | margin-left: 2px; 362 | } 363 | .image-gallery-thumbnail .image-gallery-thumbnail-inner { 364 | display: block; 365 | position: relative; 366 | } 367 | .image-gallery-thumbnail .image-gallery-thumbnail-image { 368 | vertical-align: middle; 369 | width: 100%; 370 | line-height: 0; 371 | } 372 | .image-gallery-thumbnail.active, 373 | .image-gallery-thumbnail:focus { 374 | outline: none; 375 | border: 4px solid #337ab7; 376 | } 377 | @media (max-width: 768px) { 378 | .image-gallery-thumbnail.active, 379 | .image-gallery-thumbnail:focus { 380 | border: 3px solid #337ab7; 381 | } 382 | } 383 | @media (hover: hover) and (pointer: fine) { 384 | .image-gallery-thumbnail:hover { 385 | outline: none; 386 | border: 4px solid #337ab7; 387 | } 388 | } 389 | @media (hover: hover) and (pointer: fine) and (max-width: 768px) { 390 | .image-gallery-thumbnail:hover { 391 | border: 3px solid #337ab7; 392 | } 393 | } 394 | 395 | .image-gallery-thumbnail-label { 396 | box-sizing: border-box; 397 | color: white; 398 | font-size: 1em; 399 | left: 0; 400 | line-height: 1em; 401 | padding: 5%; 402 | position: absolute; 403 | top: 50%; 404 | text-shadow: 0 2px 2px #1a1a1a; 405 | transform: translateY(-50%); 406 | white-space: normal; 407 | width: 100%; 408 | } 409 | @media (max-width: 768px) { 410 | .image-gallery-thumbnail-label { 411 | font-size: 0.8em; 412 | line-height: 0.8em; 413 | } 414 | } 415 | 416 | .image-gallery-index { 417 | background: rgba(0, 0, 0, 0.4); 418 | color: #fff; 419 | line-height: 1; 420 | padding: 10px 20px; 421 | position: absolute; 422 | right: 0; 423 | top: 0; 424 | z-index: 4; 425 | } 426 | @media (max-width: 768px) { 427 | .image-gallery-index { 428 | font-size: 0.8em; 429 | padding: 5px 10px; 430 | } 431 | } 432 | 433 | /*# sourceMappingURL=app.css.map */ 434 | -------------------------------------------------------------------------------- /src/lib/ImageGallery.svelte: -------------------------------------------------------------------------------- 1 | 427 | 428 |
435 |
436 | {#if thumbnailPosition === 'bottom' || thumbnailPosition === 'right'} 437 | slideLeft()} 466 | on:slideright={() => slideRight()} 467 | on:slidejump={(event) => { 468 | slideToIndex(event.detail); 469 | }} 470 | on:playtoggle={togglePlay} 471 | on:fullscreentoggle={toggleFullscreen} 472 | on:lazyload={onLazyLoad} 473 | on:imageload={handleImageLoad} 474 | on:imageerror={handleImageError} 475 | on:click 476 | /> 477 | {/if} 478 | {#if showThumbnails} 479 | { 493 | slideToIndex(event.detail); 494 | }} 495 | on:thumbnailmouseover={slideOnThumbnailOver ? onThumbnailMouseOver : undefined} 496 | on:thumbnailmouseleave={slideOnThumbnailOver ? onThumbnailMouseLeave : undefined} 497 | on:imageerror={handleImageError} 498 | /> 499 | {/if} 500 | {#if thumbnailPosition === 'top' || thumbnailPosition === 'left'} 501 | slideLeft()} 530 | on:slideright={() => slideRight()} 531 | on:slidejump={(event) => { 532 | slideToIndex(event.detail); 533 | }} 534 | on:playtoggle={togglePlay} 535 | on:fullscreentoggle={toggleFullscreen} 536 | on:lazyload={onLazyLoad} 537 | on:imageload={handleImageLoad} 538 | on:imageerror={handleImageError} 539 | on:click 540 | /> 541 | {/if} 542 |
543 |
544 | 545 | 549 | --------------------------------------------------------------------------------