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>

4. All default props.

index: {
  required: true
},
effect: {
  type: String,
  default: 'swipe'
},
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',
},

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:

Image Video Gallery Lightbox Component - vue-cool-lightbox

Changelog:

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

You Might Be Interested In:

Add Comment