Skip to content

A Vue.js component for touch-friendly image lightbox for mobile and desktop with simple-lightbox

License

Notifications You must be signed in to change notification settings

vrajroham/vue-simple-lightbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-simple-lightbox

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

LIVE DEMO


Install

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

Usage

  1. Import the module
  2. Register it as a component as you would any other Vue component
  3. 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

About

A Vue.js component for touch-friendly image lightbox for mobile and desktop with simple-lightbox

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published