Image/Video Gallery Lightbox Component - vue-cool-lightbox

Install & Download:

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

Description:

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