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 dependenciesnpm install# serve example at localhost:8080npm run dev# build any changes madenpm run build