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