1.1.1 • Published 6 years ago
vue-simple-lightbox-optimized v1.1.1
#vue-simple-lightbox-optimized Based on vue-simple-lightbox: https://github.com/vrajroham/vue-simple-lightbox Added a tweak to use different image sources for previews. Big props to the original creator!
Example
Use src_min to add a smaller preview of the big image for optimized performance!
<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_min: 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
title : 'Image 2'
},
{
src_min: 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',//the preview will look like the first picture
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
title : 'Image 3'
}
],
options : {
closeText : 'X'
}
}
}
}
</script>
Props
Refer to: https://github.com/vrajroham/vue-simple-lightbox
Options
Refer to: https://github.com/vrajroham/vue-simple-lightbox