Vue.js Image/Video Gallery Lightbox Component by Fancybox

Vue cool lightbox is a beautiful Vue.js lightbox plugin, inspired by a fancy box with zoom, scroll, annotations, and supported videos.

video gallery lightbox, lightbox video gallery bootstrap, lightbox video popup, image and video gallery jquery lightbox, jquery lightbox video popup, lightbox video example, responsive video lightbox

How to make use of it:

Install and download:

# NPM
$ npm install vue-cool-lightbox --save

1. Install and import 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',
        }
      ],
      index: null
    };
  },
};
</script>

4. All props are default.

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,
},

Image/Video Gallery Lightbox Component, Vue-cool-lightbox Plugin/Github, vue lightbox video, vue js video gallery, vue image lightbox carousel, vue gallery slideshow, vue3 image gallery