\nA third version of the lightweight lightbox inspired component for Vue.js with local video support and more features coming. If you're interested, see demo.\n
\n\n \n\n \n\n## Supported formats and services\n- All image formats that can be displayed in browser\n- Local video files with following extensions .mp4, .ogg, .webm, .mov, .flv, .wmv, .mkv\n- YouTube, Vimeo and Twitch embed videos with autoplay\n\n \n\n## Installation\n### Npm\n```\nnpm install --save vue-silentbox\n```\nImport the plugin into Vue:\n```js\nimport { createApp } from 'vue'\nimport VueSilentbox from 'vue-silentbox'\nimport 'vue-silentbox/dist/style.css'\n\ncreateApp({\n // your app props ...\n})\n.use(VueSilentbox)\n.mount('#root')\n```\n\n \n\n## How to use?\nDefine an array of images in the data object of your Vue instance or component.\n```js\nimport { createApp } from 'vue'\nimport VueSilentbox from 'vue-silentbox'\nimport 'vue-silentbox/dist/style.css'\n\ncreateApp({\n data: {\n images: [\n {\n src: 'images/image001.jpg',\n srcSet: '/images/image001-640.jpg 640w,/images/image001-1280.jpg 1280w,/images/image001-1920.jpg 1920w',\n description: 'Sunken dreams II. by Arbebuk',\n },\n {\n src: 'images/image002.jpg',\n srcSet: '/images/image002-640.jpg 640w,/images/image002-1280.jpg 1280w,/images/image003-1920.jpg 1920w',\n description: 'Tunnel View Sunrise by Porbital',\n }\n ]\n },\n})\n.use(VueSilentbox)\n.mount('#root')\n```\n\nThen in the template you use a `silent-box` component to display the gallery.\n\n```vue\n\n```\nOr you can show a single image by just renaming the property.\n```vue\n\n```\n\n\n### Custom activators\n\nIn case you don't like the default image previews that SilentBox provides, you can\nset your own activators - text, button or even a video! SilentBox provides a named slot for this - `silentbox-item`. The slot provides variable called `silentboxItem` which\nprovides you access to all properties you set on image object.\n\n```html\n\n\n
Gallery
\n
\n Items could be merged into groups that make galleries.\n
\n \n
{{ silentboxItem.alt }}
\n \n\n```\n\n### Plugin options\nYou can set the following options to the plugin to change the behaviour of the\nSilentBox or display additional information.\n\n| Name | Required | Type | Default | Description |\n|:------| :------: | :------: | :------: |:------|\n| downloadButtonLabel | no | string | Download | Label used in the download button. |\n\n```js\ncreateApp({\n // your app props ...\n})\n.use(VueSilentbox, {\n downloadButtonLabel: 'Download'\n})\n.mount('#root')\n```\n\n\n### Image object attributes\n\nYou can set the following attributes to the image object to change the behaviour\nof the SilentBox or display additional information. On the other hand, if you're\nlazy, only the `src` attribute is required.\n\n| Attribute | required | type | Description |\n|:------| :------: | :------: |:------|\n| src | yes | string | media source, it could be an image, video or a YouTube / Vimeo embed link |\n| srcSet | no | string | srcSet to make use of [responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) |\n| thumbnail | no | string | image used for thumbnail |\n| thumbnailHeight | no | string | height of the thumbnail in px |\n| thumbnailWidth | no | string | width of the thumbnail in px |\n| description | no | string | short description below image (doesn't work below videos yet) |\n| alt | no | string | alt description for images |\n| autoplay | no | bool| to autoplay youtube / Vimeo video |\n| download | no | bool/string | Link to download the file. When set to a boolean value (`true`/`false`), the src is used as the download link. |\n| controls | no | bool | **does not work for Vimeo**, setting false will hide video controls |\n\n### Gallery element attributes\n\nThese attributes can change the gallery element behaviour.\n\n| Attribute | required | type | Description |\n|:------| :------: | :------: |:------|\n| gallery | no | array | list of image objects that will be displayed in the gallery |\n| image | no | object | image object that will be displayed in the gallery |\n| lazy-loading | no | bool | whether images should be lazy loaded |\n| preview-count | no | number | number of images that should be displayed in the gallery |\n\n### Events\nSilentBox also fires several events that can be further used in your Vue.js application. Each event has a payload that contains the\n`item` object which holds information about the currently displayed item.\n| Event name | When is event fired |\n|:------| :------ |\n| `silentbox-overlay-opened` | when the overlay is opened |\n| `silentbox-overlay-hidden` | when the overlay is closed (button or ESC key) |\n| `silentbox-overlay-next-item-displayed` | when the user moves to the next picture (arrow or key) |\n| `silentbox-overlay-prev-item-displayed` | when the user moves to the previous picture (arrow or key) |\n\n### Open overlay programatically\nSilentBox provides two options how to open the overlay programatically. If you need to open an existing gallery, the best option\nis to use the `ref` attribute and then call the method `openOverlay` on the `$refs` object in your method. See example:\n```html\n\n```\nand then the method `openOverlay` can be called from your method:\n```javascript\n// ...\nmethods: {\n // the index parameter is optional, however it should be set if you're opening\n // the overlay on different position than the beginning of the gallery\n openOverlayProgramaticallyWithContext (item, index = 0) {\n this.$refs.silentbox.openOverlay(item, index)\n }\n}\n// ...\n```\n\nHowever, in case you just want to open an item without any context, it might be a better choice to call the global `open`\nmethod that SilentBox provides.\n```javascript\n// ...\nmethods: {\n openOverlayProgramaticallyWithoutContext (item) {\n this.$silentbox.open(item)\n }\n}\n// ...\n```\n\n \n\n\n## Upgrading from 2.x to 3.x?\nAlmost all APIs remained same except two things:\n- Vue3 always transforms `` width and height to numbers, thus properties `thumbnailWidth` and `thumbnailHeight` should always be a number\n- event fired when user navigates to previous image was renamed to `silentbox-overlay-prev-item-displayed` from `silentbox-overlay-previous-item-displayed`\n\n \n\n## Upgrading from 0.1?\nVersion 2 brought many breaking changes. There are no more two separate components\nto display a single image or gallery. So, change all your `silentbox-group` and `silentbox-single` components to `silent-box`.\nThe source of images must be an array of objects or a single object with previously mentioned attributes.\n\n \n\n## Contributions\n\nAll contributions are welcomed, however give me some time to review your requests. Please, use emoji in your commits, so it is easier to identify what your commits do.\nThere are several _emoji guides_ on the internet. Please stick with mine which is inspired by Atom contributing guidelines, see [emoji in commits](https://gist.github.com/silencesys/2ede032fe31fed95434aff10d29cabbf).\n","maintainers":[{"name":"silencesys","email":"martin@rocek.dev"}],"time":{"modified":"2023-01-12T23:21:42.305Z","created":"2017-07-31T09:33:06.253Z","0.0.9":"2017-07-31T09:33:06.253Z","0.0.10":"2017-07-31T09:39:17.792Z","0.0.11":"2017-07-31T09:44:37.743Z","0.0.12":"2017-07-31T12:09:38.504Z","0.0.13":"2017-07-31T17:21:10.536Z","0.0.14":"2017-07-31T17:25:41.796Z","0.0.15":"2017-08-02T15:39:02.612Z","0.0.16":"2017-08-09T21:08:27.537Z","0.1.0":"2017-09-12T11:40:29.273Z","0.1.1":"2017-09-15T16:03:16.414Z","0.1.2":"2018-07-16T17:25:04.610Z","0.1.3":"2019-05-16T13:58:23.112Z","0.1.4":"2019-05-16T14:00:49.697Z","0.1.5":"2019-05-16T15:51:20.270Z","0.1.6":"2019-05-16T17:57:28.131Z","0.1.7":"2019-05-16T17:58:31.274Z","0.1.8":"2019-06-04T13:36:11.308Z","0.1.9":"2019-06-08T12:40:25.955Z","2.0.0":"2020-03-02T01:13:51.597Z","2.0.1":"2020-05-11T19:57:18.531Z","2.0.2":"2020-06-07T08:36:49.959Z","2.1.0":"2020-06-24T16:01:55.821Z","2.1.1":"2020-06-24T16:07:24.383Z","2.2.0":"2020-06-25T16:42:45.626Z","2.2.1":"2020-10-20T08:45:42.820Z","2.2.2":"2020-10-20T08:47:00.422Z","2.3.0":"2020-12-08T11:26:07.537Z","2.3.1":"2021-01-18T11:31:04.970Z","2.3.2":"2021-01-18T11:33:42.413Z","2.4.0":"2021-02-03T23:21:22.359Z","2.4.1":"2021-02-20T11:11:11.062Z","2.4.2":"2021-02-25T08:58:10.383Z","2.4.3":"2021-03-12T08:29:27.720Z","2.4.4":"2021-03-21T13:04:15.094Z","2.4.5":"2021-04-30T21:25:39.261Z","2.4.6":"2022-10-09T16:55:57.351Z","3.0.0":"2022-12-22T23:49:31.588Z","3.0.1":"2022-12-22T23:53:01.223Z","3.0.2":"2022-12-23T00:17:13.146Z","3.0.3":"2023-01-01T20:10:39.185Z","3.0.4":"2023-01-12T23:21:42.214Z"},"readmeFilename":"README.md","homepage":"https://silentbox.silencesys.com/","keywords":["Vue","Silentbox","Lightbox","Fancybox","Vuejs","Vue component","Vue 3","Gallery","Image viewer","Image slider","Images","Galleries","Fancybox-gallery","Lightbox-gallery"],"repository":{"type":"git","url":"git+https://github.com/silencesys/silentbox.git"},"author":{"name":"Martin Roček"},"bugs":{"url":"https://github.com/silencesys/silentbox/issues"},"license":"MIT"}
![\"SilentBox](\"https://silentbox.rocek.dev/images/sb3-dark.png\")
![\"SilentBox](\"https://silentbox.rocek.dev/images/silentbox-v3.png\")
![\"Github](\"https://img.shields.io/github/stars/silencesys/silentbox.svg?color=08AEEA&labelColor=169DC1&style=flat-square\")
![\"Github](\"https://img.shields.io/github/issues/silencesys/silentbox.svg?style=flat-square&labelColor=25ADA3&color=4CC1B8\")
![\"License\"](\"https://img.shields.io/github/license/silencesys/silentbox.svg?color=2AC47A&labelColor=389367&style=flat-square\")
\n