vue-cool-lightbox is a pretty nice image & video gallery lightbox component with caption and image zoom support. Inspired by the Fancy Box library.
How to use it:
1. Install and import the vue-cool-lightbox.
import CoolLightBox from 'vue-cool-lightbox'
2. Register the component.
export default {
components: {
CoolLightBox,
},
}
3. Insert the component into the template.
<template>
<div id="app">
<CoolLightBox
:items="items"
:index="index"
@close="index = null">
</CoolLightBox>
<div class="images-wrapper">
<div
class="image"
v-for="(image, imageIndex) in items"
:key="imageIndex"
@click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image.src + ')' }"
></div>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
items: [
{
title: 'Image 1',
description: "Description 1",
src: '1.jpg',
},
{
title: 'a beautiful mountain view',
description: "Description 2",
src: '2.jpg',
},
{
title: 'Youtube Video',
description: "Youtube Video",
thumb: 'thumb.jpg',
src: 'https://www.youtube.com/watch?v=d0tU18Ybcvk',
}
],
index: null
};
},
};
</script>
4. All default props.
index: {
required: true
},
effect: {
type: String,
default: 'swipe' // or fade
},
items: {
type: Array,
required: true,
},
loop: {
type: Boolean,
default: true,
},
slideshow: {
type: Boolean,
default: true,
},
slideshowColorBar: {
type: String,
default: '#fa4242',
},
slideshowDuration: {
type: Number,
default: 3000,
},
useZoomBar: {
type: Boolean,
default: false,
},
closeOnClickOutsideMobile: {
type: Boolean,
default: false,
},
srcName: {
type: String,
default: 'src',
},
srcSetName: {
type: String,
default: 'srcset'
},
srcThumb: {
type: String,
default: 'thumb',
},
srcMediaType: {
type: String,
default: 'mediaType',
},
overlayColor: {
type: String,
default: 'rgba(30, 30, 30, .9)'
},
zIndex: {
type: Number,
default: 9999,
},
gallery: {
type: Boolean,
default: true,
},
fullScreen: {
type: Boolean,
default: false,
},
thumbsPosition: {
type: String,
default: 'right',
},
youtubeCookies: {
type: Boolean,
default: true,
},
enableWheelEvent: {
type: Boolean,
default: false,
},
showCloseButton: {
type: Boolean,
default: true,
},
disableZoom: {
type: Boolean,
default: false,
},
dir: {
type: String,
default: 'ltr',
},
enableScrollLock: {
type: Boolean,
default: true,
},
Preview:
Changelog:
v2.7.5 (06/13/2021)
- Added translations, and fixes for video extensions with uppercase format
v2.7.4 (05/18/2021)
- pull request src media images
v2.7.3 (04/25/2021)
- fixed plyr.js issues swipe
v2.7.2 (04/24/2021)
- added new feature to use picture on images
02/06/2021
- Fixed incorrect x position for “bottom” gallery
v2.7.0 (12/20/2020)
- fixed video with encrypted url
v2.6.9 (11/23/2020)
- removed scale when zoom is disabled
v2.6.8 (11/08/2020)
- fixed enableBodyScroll on beforeDestroy hook
v2.6.7 (10/28/2020)
- added alt to images
v2.6.5 (10/27/2020)
- stop videos when slide is changed
v2.6.4 (10/15/2020)
- added beforeDestroy hook to remove bodyScrollLock
v2.6.3 (10/05/2020)
- fixed multiple lightbox on same page
v2.6.2 (09/29/2020)
- Fixed removeCompensateForScrollbar problem on mobile devices
v2.6.1 (09/28/2020)
- added compensate for scrollbar class
v2.6.0 (09/22/2020)
- Added bodyScrollLock
09/14/2020
- feat: add prop to enable page scroll
v2.5.0 (2020-08-25)
- added autoplay and dir prop
v2.4.3 (2020-08-19)
- Added body scroll lock
v2.4.2 (2020-08-15)
- Fixed google storage and other cloud providers
v2.4.1 (2020-06-17)
- added disableZoom prop
v2.4.0 (2020-06-15)
- Add more props
Download Details:
Author: lucaspulliese
Live Demo: image-video-gallery-lightbox
Download Link: https://github.com/lucaspulliese/vue-cool-lightbox/archive/master.zip
Official Website: https://github.com/lucaspulliese/vue-cool-lightbox
Install & Download:
# NPM
$ npm install vue-cool-lightbox --save