{"id":17026103,"url":"https://github.com/pexea12/vue-image-lightbox","last_synced_at":"2026-04-13T02:30:17.025Z","repository":{"id":14052924,"uuid":"75759388","full_name":"pexea12/vue-image-lightbox","owner":"pexea12","description":"A Vue component to display an image gallery lightbox","archived":false,"fork":false,"pushed_at":"2023-09-22T13:26:40.000Z","size":2499,"stargazers_count":347,"open_issues_count":17,"forks_count":80,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-09-19T00:29:12.465Z","etag":null,"topics":["image-gallery","lightbox","vue","vue-components","vue-image-lightbox"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pexea12.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-06T18:28:25.000Z","updated_at":"2024-09-16T10:55:04.000Z","dependencies_parsed_at":"2024-01-02T23:28:53.891Z","dependency_job_id":"bf79f65f-b107-47b8-8a00-1d1c89ba6a31","html_url":"https://github.com/pexea12/vue-image-lightbox","commit_stats":{"total_commits":254,"total_committers":29,"mean_commits":8.758620689655173,"dds":"0.46850393700787396","last_synced_commit":"b8f6b8d7863f3387bd773166a14856cc90f3a8fb"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pexea12%2Fvue-image-lightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pexea12%2Fvue-image-lightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pexea12%2Fvue-image-lightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pexea12%2Fvue-image-lightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pexea12","download_url":"https://codeload.github.com/pexea12/vue-image-lightbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219847890,"owners_count":16556345,"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":["image-gallery","lightbox","vue","vue-components","vue-image-lightbox"],"created_at":"2024-10-14T07:30:29.163Z","updated_at":"2026-04-13T02:30:16.878Z","avatar_url":"https://github.com/pexea12.png","language":"Vue","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","Vue","UI Components","UI Components [🔝](#readme)"],"sub_categories":["覆盖","UI Components","Overlay"],"readme":"# vue-image-lightbox\nA simple image/video lightbox component for Vuejs\n[NPM Package](https://www.npmjs.com/package/vue-image-lightbox)\n\nI use CSS style from [react-images](https://github.com/jossmac/react-images)\n\n[Demo!](http://pexea12.github.io/vue-image-lightbox/)\n\n## Development (NPM / Yarn)\n```\nnpm run dev\nyarn dev\n```\n\n## Install\n\n#### NPM / Yarn\n\nInstall the package:\n\n```\nnpm install vue-image-lightbox vue-lazyload\nyarn add vue-image-lightbox vue-lazyload\n```\n\nThen import it in your project\nAt your entry point (`main.js` normally)\n```javascript\nimport Vue from 'vue'\nimport VueLazyLoad from 'vue-lazyload'\n...\nVue.use(VueLazyLoad)\n```\n\nand use the lightbox:\n```javascript\nimport LightBox from 'vue-image-lightbox'\n\nexport default {\n  components: {\n    LightBox,\n  },\n}\n```\n\n#### Browser global\n\n```html\n\u003cscript src=\"path/to/vue.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/dist/vue-image-lightbox.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nYou can simply view [App.vue](https://github.com/pexea12/vue-image-lightbox/blob/master/src/App.vue) to see how to use **vue-image-lightbox**\n\nImport CSS style\n```javascript\nrequire('vue-image-lightbox/dist/vue-image-lightbox.min.css')\n// Use only when you are using Webpack\n```\nHow to use:\n```html\n\u003clight-box :media=\"media\"\u003e\u003c/light-box\u003e\n```\n\n`media` has the structure:\n```javascript\n[\n  { // For image\n    thumb: 'http://example.com/thumb.jpg',\n    src: 'http://example.com/image.jpg',\n    caption: 'caption to display. receive \u003chtml\u003e \u003cb\u003etag\u003c/b\u003e', // Optional\n    srcset: '...' // Optional for displaying responsive images\n  },\n  { // For video\n    thumb: 'https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg',\n    sources: [\n      {\n        src: 'https://www.w3schools.com/html/mov_bbb.mp4',\n        type: 'video/mp4'\n      }\n    ],\n    type: \"video\",\n    caption: '\u003ch4\u003eMonsters Inc.\u003c/h4\u003e',\n    width: 800, // required\n    height: 600, // required\n    autoplay: true //Optional to autoplay video when lightbox opens\n  }\n]\n```\n\n## Options\n\n### Properties\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003ename\u003c/th\u003e\n      \u003cth\u003etype\u003c/th\u003e\n      \u003cth\u003edefault\u003c/th\u003e\n      \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emedia\u003c/td\u003e\n      \u003ctd\u003eArray\u003c/td\u003e\n      \u003ctd\u003erequired\u003c/td\u003e\n      \u003ctd\u003eMedia array to display\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshowLightBox\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eWhether to show lightbox or not at the beginning\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003estartAt\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e0\u003c/td\u003e\n      \u003ctd\u003eIndex of the image that you want to start at\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enThumbs\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e7\u003c/td\u003e\n      \u003ctd\u003eNumber of thumbnail images\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshowThumbs\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eWhether to show thumbnails or not\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eautoPlay\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eMove to next image automatically\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eautoPlayTime\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e3000 (ms)\u003c/td\u003e\n      \u003ctd\u003eTime to stop at an image before move on to next image\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003esiteLoading\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003edefault image when your image is error or loading\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshowCaption\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eWhether to show caption or not\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edisableScroll\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eset to `true` to avoid scrolling views behind lightbox\u003c/td\u003e\n    \u003c/tr\u003e\n     \u003ctd\u003edisableZoom\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eset to `true` to avoid zooming lightbox\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003elengthToLoadMore\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e0\u003c/td\u003e\n      \u003ctd\u003eMinimum length unto end to emit load more event\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eclosable\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eDisplay the close button at the right top corner or not. ESC clicking-close will also be disabled if closable is set to false.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecloseText\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003eClose (Esc)\u003c/td\u003e\n      \u003ctd\u003eText for the close button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003epreviousText\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003ePrevious\u003c/td\u003e\n      \u003ctd\u003eText for the previous image button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enextText\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003eNext\u003c/td\u003e\n      \u003ctd\u003eText for the next image button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003epreviousThumbText\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003ePrevious\u003c/td\u003e\n      \u003ctd\u003eText for the previous thumb image button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enextThumbText\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003eNext\u003c/td\u003e\n      \u003ctd\u003eText for the next thumb image button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshowFooterCount\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eShow footer count\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Methods\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003ename\u003c/th\u003e\n      \u003cth\u003earguments\u003c/th\u003e\n      \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enextImage\u003c/td\u003e\n      \u003ctd\u003e()\u003c/td\u003e\n      \u003cth\u003eMove to next image\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003epreviousImage\u003c/td\u003e\n      \u003ctd\u003e()\u003c/td\u003e\n      \u003ctd\u003eMove to previous image\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecloseLightBox\u003c/td\u003e\n      \u003ctd\u003e()\u003c/td\u003e\n      \u003ctd\u003eClose lightbox\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshowImage\u003c/td\u003e\n      \u003ctd\u003e(index)\u003c/td\u003e\n      \u003ctd\u003eShow the image at index\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Slots\n\n#### close\nThe content of the close button.\n\n#### footer\nThe content of the footer under the image.\n\n##### slot-scopes\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003ename\u003c/th\u003e\n      \u003cth\u003etype\u003c/th\u003e\n      \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecurrent\u003c/td\u003e\n      \u003ctd\u003einteger\u003c/td\u003e\n      \u003ctd\u003eNumber of the current image displayed\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etotal\u003c/td\u003e\n      \u003ctd\u003einteger\u003c/td\u003e\n      \u003ctd\u003eNumbers of the images\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### previous\nThe previous button on the main image.\n\n#### next\nThe next button on the main image.\n\n#### previousThumb\nThe previous button on the thumbs list.\n\n#### nextThumb\nThe next button on the thumbs list.\n\n#### customCaption\nThe caption of the current image.\n\n#### videoIcon\nThe Icon used for videos\n\n### Events\n\n- `onOpened`: emit when the lightbox is opened.\n- `onClosed`: emit when the lightbox is closed.\n- `onLastIndex`: Emit when the current image is the last one of the list.\n- `onFirstIndex`: Emit when the current image is the first one of the list.\n- `onStartIndex`: Emit when the current image is at the `startAt` index (specified in the properties).\n- `onLoad`: Emit when there are `lengthToLoadMore` images left in the array (specified in the properties). For example, if `lengthToLoadMore = 2` and there are 7 images in your array, when you reach index 4 (which means there are 2 images left which are not discovered yet), this event will be emitted. After that, if the image array are updated and there are totally 15 images, the event will be emitted at index 12.\n- `onImageChanged`: Emit when the image is changed.\n\n## CREDITS\n\nMost of the CSS belongs to [react-images](https://github.com/jossmac/react-images)\n\n### Contributors:\n- [@imcvampire](https://github.com/imcvampire)\n- [@krystalcampioni](https://github.com/krystalcampioni)\n- [@jstr14](https://github.com/jstr14)\n- [@PedroBatista333](https://github.com/PedroBatista333)\n- [@vtalbot](https://github.com/vtalbot)\n- [@hasangilak](https://github.com/hasangilak)\n- [@neobutter](https://github.com/neobutter)\n- [@mudin](https://github.com/mudin)\n- [@asterisx](https://github.com/asterisx)\n- [@janosrusiczki](https://github.com/janosrusiczki)\njanosrusiczki)\njanosrusiczki]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpexea12%2Fvue-image-lightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpexea12%2Fvue-image-lightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpexea12%2Fvue-image-lightbox/lists"}