Vue.js lightbox package without any dependencies

by Vue.js Examples

Vue-cool-lightbox

Vue-cool-lightbox is a Vue.js lightbox component without any dependencies, inspired by fancybox with zoom and videos supported.

View Demo View Github

Installation

Use the node package manager to install vue-cool-lightbox.

npm install --save vue-cool-lightbox

and use the lightbox:

import CoolLightBox from 'vue-cool-lightbox'

export default {
  components: {
    CoolLightBox,
  },
}

Usage

<template>
  <div id="app">
    <CoolLightBox 
      :items="items" 
      :index="index"
      loop
      @close="index = null">
    </CoolLightBox>

    <div class="images-wrapper">
      <div
        class="image"
        v-for="(image, imageIndex) in items"
        :key="imageIndex"
        @click="setIndex(imageIndex)"
        :style="{ backgroundImage: 'url(' + image.src + ')' }"
      ></div>
    </div>
  </div>
</template>

<script>
import CoolLightBox from 'vue-cool-lightbox'

export default {
  name: "app",
  data: function () {
    return {
      items: [
        {
          src: 'https://cosmos-images2.imgix.net/file/spina/photo/20565/
          191010_nature.jpg?ixlib=rails-2.1.4&auto=format&ch=Width%2CDPR&fit=max&w=835',
        },
        {
          src: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/
          images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*',
        },
      ],
      index: null
    };
  },
  components: {
    CoolLightBox
  },
  methods: {
    setIndex(index) {
      this.index = index
    }
  }
};
</script>

Or items can be just an array:

items: [
  'http://example.com/image.jpg',
  'youtube.com',
  'vimeo.com',
  'mp4',
]

Items Supported attributes

Attribute required type Description
src yes string media source, it can be an image or a Youtube / Vimeo / Mp4 video
title no string the image title
description no string the image description
thumb no string thumb url used in thumbs block

Props Supported

Attribute type Description Default
items Array Array of images/videos
index Number Index of items to open
loop Boolean Enables looping through items true
slideshow Boolean Enables lighbox slideshow true
slideshowColorBar String Color of the slideshow progress bar #fa4242
slideshowDuration Number Duration of slides when slideshow is running (in ms) 3000
srcName String Name of the prop to use as image/video url src
srcThumb String Name of the prop to use as image/video thumb thumb
overlayColor String Overlay color rgba(30, 30, 30, .9)

Slots Supported

Name Description
icon-previous Previous icon
icon-next Next icon
close Close icon

GitHub