
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
vue-simple-lightbox
Advanced tools
A Vue.js component for touch-friendly image lightbox for mobile and desktop powered by Simple Lighbox
// For Vue.js 2.0+
npm install vue-simple-lightbox
<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>
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) |
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 |
# install dependencies
npm install
# serve example at localhost:8080
npm run dev
# build any changes made
npm run build
FAQs
A Vue.js component for touch-friendly image lightbox
The npm package vue-simple-lightbox receives a total of 39 weekly downloads. As such, vue-simple-lightbox popularity was classified as not popular.
We found that vue-simple-lightbox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.