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

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>

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

You Might Be Interested In:

Add Comment