{"id":18055728,"url":"https://github.com/marinerer/vue-lightbox-lite","last_synced_at":"2025-04-05T09:24:24.239Z","repository":{"id":93979544,"uuid":"422880951","full_name":"Marinerer/vue-lightbox-lite","owner":"Marinerer","description":"A lightweight image, video and iframe lightbox gallery component for Vue. Supports slide, zoom, rotation, autoplay, captions  and so on.  轻量级的图片/视频 预览器，支持自动播放、旋转、缩放、全屏、键盘及手势滑动切换等。🏞️ ","archived":false,"fork":false,"pushed_at":"2021-12-31T02:15:03.000Z","size":862,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T07:45:33.785Z","etag":null,"topics":["gallery","image-gallery","image-lightbox","image-viewer","lightbox","lightbox-gallery","video-gallery","viewer","vue","vue-gallery","vue-lightbox","vue-viewer"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Marinerer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-30T12:55:27.000Z","updated_at":"2022-08-30T03:28:06.000Z","dependencies_parsed_at":"2023-03-13T17:08:51.547Z","dependency_job_id":null,"html_url":"https://github.com/Marinerer/vue-lightbox-lite","commit_stats":null,"previous_names":["marinerer/vue-lightbox-lite","meqn/vue-lightbox-lite"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marinerer%2Fvue-lightbox-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marinerer%2Fvue-lightbox-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marinerer%2Fvue-lightbox-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marinerer%2Fvue-lightbox-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Marinerer","download_url":"https://codeload.github.com/Marinerer/vue-lightbox-lite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247313928,"owners_count":20918718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gallery","image-gallery","image-lightbox","image-viewer","lightbox","lightbox-gallery","video-gallery","viewer","vue","vue-gallery","vue-lightbox","vue-viewer"],"created_at":"2024-10-31T01:11:43.377Z","updated_at":"2025-04-05T09:24:24.215Z","avatar_url":"https://github.com/Marinerer.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-lightbox-lite\n\nA lightweight image, video and iframe lightbox gallery component for Vue. Supports slide, zoom, rotation, autoplay, captions  and so on, based on [Vue-cool-lightbox](https://github.com/lucaspulliese/vue-cool-lightbox).\n\n轻量级的图片/视频 预览器，支持自动播放、旋转、缩放、全屏、键盘及手势滑动切换等。\n\n![default screenshot](https://cdn.jsdelivr.net/gh/Meqn/vue-lightbox-lite/src/assets/screen_default.jpg)\n\n![light screenshot](https://cdn.jsdelivr.net/gh/Meqn/vue-lightbox-lite/src/assets/screen_light.jpg)\n\n## Features\n1. No external dependencies.\n2. Fully responsive.\n3. autoplay slides that play or pause\n4. Full screen support.\n5. Multiple zoom levels.\n6. Rotate images.\n7. YouTube Vimeo and html5 videos Support.\n8. Keyboard Navigation for desktop.\n9. And many more.\n\n\n## Installation\n\n```bash\nnpm install vue-lightbox-lite\n\n# 或\n\nyarn add vue-lightbox-lite\n```\n\n## Usage\n\n### 1. Global import\n\nIn main.js:\n```js\n// main.js\nimport Lightbox from 'vue-lightbox-lite'\nimport 'vue-lightbox-lite/dist/index.css'\n\nVue.use(Lightbox)\n```\n\nIn `component.vue`\n```html\n\u003ctemplate\u003e\n\u003cdiv class=\"lightbox\"\u003e\n  \u003cul class=\"list\"\u003e\n    \u003cli v-for=\"(item, key) in list\" :key=\"key\" @click=\"index = key\"\u003elink - {{ key }}\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003cLightBox\n    :index=\"index\"\n    :items=\"list\"\n  /\u003e\n\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      index: null,\n      list: [\n        'http://www.domain.com/image.jpg',\n        'http://www.domain.com/video.mp4',\n        {\n          src: 'http://www.domain.com/playgame/',\n          mediaType: 'video',\n          ext: 'webm',\n          title: '',\n          description: ''\n        },\n        'https://www.youtube.com/watch?v=d0tU18Ybcvk',\n        {\n          src: 'https://www.youtube.com/watch?v=d0tU18Ybcvk',\n          mediaType: 'webVideo'\n        },\n        {\n          src: 'http://www.domain.com/file.pdf',\n          mediaType: 'iframe'\n        }\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### 2. In Component\n\n```html\n\u003ctemplate\u003e\n\u003cdiv class=\"lightbox\"\u003e\n  \u003cbutton @click=\"index = 0\"\u003epreview\u003c/button\u003e\n\n  \u003cViewer\n    :index=\"index\"\n    :items=\"list\"\n  /\u003e\n\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueLightbox from 'vue-lightbox-lite'\nimport 'vue-lightbox-lite/dist/index.css'\n\nexport default {\n  component: {\n    Viewer: VueLightbox\n  },\n  data() {\n    return {\n      index: null,\n      list: [\n        'http://www.domain.com/image.jpg',\n        'http://www.domain.com/video.mp4',\n        'http://www.domain.com/file.pdf'\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n\n## API\n\n\n### Items attributes\n| Name        | Type           | Default | Description                                         |\n| ----------- | -------------- | ------- | --------------------------------------------------- |\n| src         | String         |         | Url of the image/video/iframe                       |\n| mediaType   | String         | `image` | media type,  `image`, `video`, `webVideo`, `iframe` |\n| ext         | String         |         | e.g. `mp4`, `ogg`, `webm`, `pdf`                    |\n| thumb       | String         |         |                                                     |\n| alt         | String         |         |                                                     |\n| srcset      | String         |         |                                                     |\n| sizes       | String         |         |                                                     |\n| title       | String         |         |                                                     |\n| description | String         |         |                                                     |\n| width       | String\\|Number | `auto`  | Control width, `video` \u0026 `iframe`                   |\n| height      | String\\|Number | `auto`  |                                                     |\n| maxWidth    | String\\|Number | `auto`  |                                                     |\n| maxHeight   | String\\|Number | `auto`  |                                                     |\n\n\n### props\n\n| Name             | Type                    | Default                          | Description                                                  |\n| ---------------- | ----------------------- | -------------------------------- | ------------------------------------------------------------ |\n| index            | Number                  | null                             | Index of items to open                                       |\n| items            | Array\u003cObject \\| String\u003e |                                  | Array of images/videos                                       |\n| container        | Element \\| String       | `document.body`                  |                                                              |\n| theme            | String                  | `dark`                           | `dark`, `light`                                              |\n| customClass      | String                  |                                  |                                                              |\n| zIndex           | Number                  | `9999`                           |                                                              |\n| highColor        | String                  | `#fa4242`                        | progressbar color and thumbnails border-color                |\n| overlayColor     | String                  |                                  |                                                              |\n| navigator        | Boolean                 | `true`                           |                                                              |\n| toolbar          | Array\u003cString\u003e           |                                  | toolbar: `counter`, `zoom`, `slide`, `rotate`, `gallery`, `fullscreen`, `download`, `close` |\n| loop             | Boolean                 | `true`                           |                                                              |\n| slideDuration    | Number                  | `3500`                           |                                                              |\n| showGallery      | Boolean                 | `false`                          |                                                              |\n| galleryPosition  | String                  |                                  | `right`, `bottom`                                            |\n| video            | Object                  | `{autoplay: false, raito: 16/9}` | video parameter，`autoplay`, `width`,`height`,`maxWidth`,`maxHeight` |\n| iframe           | Object                  |                                  | `width`,`height`,`maxWidth`,`maxHeight`                      |\n| enableWheelEvent | Boolean                 | `false`                          |                                                              |\n| enableScrollLock | Boolean                 | `true`                           |                                                              |\n| clickOutsideHide | Boolean                 | `true`                           |                                                              |\n\n\n\n\n### Slots\n- `loading`\n- `icon-previous`\n- `icon-next`\n\n### Events\n\n- `open(index: number)`\n- `close`\n- `change(index: number)`\n- `change-end(index: number)`\n\n\n### Methods\n\n- `open(index)`\n- `close()`\n- `previous()`\n- `next()`\n- `change(index)`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarinerer%2Fvue-lightbox-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarinerer%2Fvue-lightbox-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarinerer%2Fvue-lightbox-lite/lists"}