Vue-cool-lightbox is a pretty Vue.js lightbox component without any dependencies, inspired by fancybox with zoom, swipe, captions and videos supported.
Use node package manager to install vue-cool-lightbox.
npm install --save vue-cool-lightbox
and use the lightbox:
import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
export default {
components: {
CoolLightBox,
},
}
You can see the full documentation here: https://vue-cool-lightbox.lucaspulliese.com/.
<template>
<div id="app">
<CoolLightBox
:items="items"
:index="index"
loop
@close="index = null">
</CoolLightBox>
<div class="images-wrapper">
<div
class="image"
v-for="(image, imageIndex) in items"
:key="imageIndex"
@click="setIndex(imageIndex)"
:style="{ backgroundImage: 'url(' + image.src + ')' }"
></div>
</div>
</div>
</template>
<script>
import CoolLightBox from 'vue-cool-lightbox'
export default {
name: "app",
data: function () {
return {
items: [
{
src: 'https://cosmos-images2.imgix.net/file/spina/photo/20565/
191010_nature.jpg?ixlib=rails-2.1.4&auto=format&ch=Width%2CDPR&fit=max&w=835',
},
{
src: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/
images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*',
},
],
index: null
};
},
components: {
CoolLightBox
},
methods: {
setIndex(index) {
this.index = index
}
}
};
</script>
Or items
can be just an array:
items: [
'http://example.com/image.jpg',
'youtube.com',
'vimeo.com',
'mp4',
]
Attribute | required | type | Description |
---|---|---|---|
src | yes | string | media source, it can be an image or a Youtube / Vimeo / Mp4 video |
title | no | string | the image title |
description | no | string | the image description |
thumb | no | string | thumb url used in thumbs block |
mediaType | no | string | defines media type |
Attribute | type | Description | Default |
---|---|---|---|
items | Array | Array of images/videos | |
index | Number | Index of items to open | |
effect | String | Effect on slide, could be swipe or fade | swipe |
fullScreen | Boolean | Allow users to fullscreen mode | false |
loop | Boolean | Enables looping through items | true |
slideshow | Boolean | Enables lighbox slideshow | true |
slideshowColorBar | String | Color of the slideshow progress bar | #fa4242 |
slideshowDuration | Number | Duration of slides when slideshow is running (in ms) | 3000 |
srcName | String | Name of the prop to use as image/video url | src |
srcThumb | String | Name of the prop to use as image/video thumb | thumb |
overlayColor | String | Overlay color | rgba(30, 30, 30, .9) |
zIndex | Number | .cool-lightbox z-index | 9999 |
gallery | Boolean | Enable/disable gallery | true |
thumbsPosition | String | Defines thumbs position, could be right or bottom | 'right' |
youtubeCookies | Boolean | if is setted to false it will use https://www.youtube-nocookie.com/embed/YOUTUBE_ID for youtube videos | true |
useZoomBar | Boolean | enables a zoom bar similar with the zoom as in Slack | false |
enableWheelEvent | Boolean | enables change slides on mouse wheel events | false |
closeOnClickOutsideMobile | Boolean | enables close lightbox when the user clicks outside the image/video/iframe on mobile devices | false |
srcMediaType | String | media type src for each item | 'mediaType' |
showCloseButton | Boolean | show or hide close button | true |
disableZoom | Boolean | disable lightbox zoom | false |
Name | Description |
---|---|
icon-previous | Previous icon |
icon-next | Next icon |
close | Close icon |
loading | Loading animation |
Name | Attributes | Listen to | Description |
---|---|---|---|
OnChange | (indexItem) | @on-change | Emitted when the lightbox changes the item index |
OnOpen | (indexItem) | @on-open | Emitted when the lightbox is opened |
Close | (indexItem) | @close | Emitted when the lightbox is closed |
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.