vue-cool-lightbox

Vue-cool-lightbox

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

Installation

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

npm install --save vue-cool-lightbox

and use the lightbox:

import CoolLightBox from 'vue-cool-lightbox'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'

export default {
  components: {
    CoolLightBox,
  },
}

Examples

You can see the full documentation here: https://vue-cool-lightbox.lucaspulliese.com/.

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
mediaType	no	string	defines media type

Props Supported

Attribute	type	Description	Default
items	Array	Array of images/videos
index	Number	Index of items to open
effect	String	Effect on slide, could be swipe or fade	swipe
fullScreen	Boolean	Allow users to fullscreen mode	false
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)
zIndex	Number	.cool-lightbox z-index	9999
gallery	Boolean	Enable/disable gallery	true
thumbsPosition	String	Defines thumbs position, could be right or bottom	'right'
youtubeCookies	Boolean	if is setted to false it will use https://www.youtube-nocookie.com/embed/YOUTUBE_ID for youtube videos	true
useZoomBar	Boolean	enables a zoom bar similar with the zoom as in Slack	false
enableWheelEvent	Boolean	enables change slides on mouse wheel events	false
closeOnClickOutsideMobile	Boolean	enables close lightbox when the user clicks outside the image/video/iframe on mobile devices	false
srcMediaType	String	media type src for each item	'mediaType'
showCloseButton	Boolean	show or hide close button	true
disableZoom	Boolean	disable lightbox zoom	false

Slots Supported

Name	Description
icon-previous	Previous icon
icon-next	Next icon
close	Close icon
loading	Loading animation

Events Supported

Name	Attributes	Listen to	Description
OnChange	(indexItem)	@on-change	Emitted when the lightbox changes the item index
OnOpen	(indexItem)	@on-open	Emitted when the lightbox is opened
Close	(indexItem)	@close	Emitted when the lightbox is closed

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT