vue-simple-lightbox

A Vue.js component for touch-friendly image lightbox for mobile and desktop powered by Simple Lighbox

Install

// For Vue.js 2.0+
npm install vue-simple-lightbox

Usage

Import the module
Register it as a component as you would any other Vue component
Use it within your template

Example

<template>
  <div id="app">
    <p>Welcome to your Vue.js lightbox!</p>

    <lightbox
      id="mylightbox"
      :images="images"
      :image_class=" 'img-responsive img-rounded' "
      :album_class=" 'my-album-class' "
      :options="options">
    </lightbox>

  </div>
</template>

<script>
  import Lightbox from 'vue-simple-lightbox'

  export default {
    components: {
      Lightbox
    },
    data(){
        return{
          images : [
            {
                src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
                title : 'Image 2'
            },
            {
                src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
                title : 'Image 3'
            },
            {
                src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img3.jpg',
                title : ''
            },
            {
                src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img4.jpg',
                title : ''
            },
          ],
          options : {
            closeText : 'X'
          }
        }
      }
  }
</script>

Props

Many of these props are inherited from simplelightbox configuration so see their docs for further details.

Prop Name	Type	Description
id	String	A string by which to identify the component, can be anything. Required
images	Array	Array containing (src,title) Required
image_class	String	Class for each image
album_class	String	Class for album. i.e. Group of images (current lightbox)
options	Object	Options for lightbox (refer following table)

Options

Property	Default	Type	Description
sourceAttr	href	string	the attribute used for large images
overlay	true	bool	show an overlay or not
spinner	true	bool	show spinner or not
nav	true	bool	show arrow-navigation or not
navText	['←','→']	array	text or html for the navigation arrows
captions	true	bool	show captions if availabled or not
captionSelector	'img'	string	set the element where the caption is. Set it to "self" for the A-Tag itself
captionType	'attr'	string	how to get the caption. You can choose between attr, data or text
captionsData	title	string	get the caption from given attribute
captionPosition	'bottom'	string	the position of the caption. Options are top, bottom or outside (note that outside can be outside the visible viewport!)
captionDelay	0	int	adds a delay before the caption shows (in ms)
close	true	bool	show the close button or not
closeText	'×'	string	text or html for the close button
swipeClose	true	bool	swipe up or down to close gallery
showCounter	true	bool	show current image index or not
fileExt	'png\|jpg\|jpeg\|gif'	regexp or false	list of fileextensions the plugin works with or false for disable the check
animationSpeed	250	int	how long takes the slide animation
animationSlide	true	bool	weather to slide in new photos or not, disable to fade
preloading	true	bool	allows preloading next und previous images
enableKeyboard	true	bool	allow keyboard arrow navigation and close with ESC key
loop	true	bool	enables looping through images
rel	false	mixed	group images by rel attribute of link with same selector.
docClose	true	bool	closes the lightbox when clicking outside
swipeTolerance	50	int	how much pixel you have to swipe, until next or previous image
className:	'simple-lightbox'	string	adds a class to the wrapper of the lightbox
widthRatio:	0.8	float	Ratio of image width to screen width
heightRatio:	0.9	float	Ratio of image height to screen height
disableRightClick	false	bool	disable rightclick on image or not
disableScroll	true	bool	stop scrolling page if lightbox is opened
alertError	true	bool	show an alert, if image was not found. If false error will be ignored
alertErrorMessage	'Image not found, next image will be loaded'	string	the message displayed if image was not found
additionalHtml	false	string	Additional HTML showing inside every image. Usefull for watermark etc. If false nothing is added
history	true	bool	enable history back closes lightbox instead of reloading the page

Development

# install dependencies
npm install

# serve example at localhost:8080
npm run dev

# build any changes made
npm run build

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

vrajroham / vue-simple-lightbox

Programming Languages

Labels