Press "Enter" to skip to content

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


See Demo And Download

Official Website(lucaspulliese): Click Here

This superior jQuery/javascript plugin is developed by lucaspulliese. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.