vue-image-lightbox/dist/vue-image-lightbox.min.js

A Vue.js package to display an image gallery lightbox

module.exports=function(e){function t(i){if(s[i])return s[i].exports;var l=s[i]={exports:{},id:i,loaded:!1};return e[i].call(l.exports,l,l.exports,t),l.loaded=!0,l.exports}var s={};return t.m=e,t.c=s,t.p="/",t(0)}([function(e,t,s){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var l=s(4),n=i(l);t.default=n.default},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{images:{type:Array,required:!0},showLightBox:{type:Boolean,default:!0},startAt:{type:Number,default:0},nThumbs:{type:Number,default:7},showThumbs:{type:Boolean,default:!0},autoPlay:{type:Boolean,default:!1},autoPlayTime:{type:Number,default:3e3}},data:function(){return{select:this.startAt,thumbSelect:this.startAt,lightBoxOn:this.showLightBox,countImages:this.images.length,displayThumbs:this.images.slice(0,this.nThumbs),timer:null,beginThumbIndex:0}},mounted:function(){var e=this;this.autoPlay&&(this.timer=setInterval(function(){e.nextImage()},this.autoPlayTime))},watch:{select:function(){var e=Math.floor(this.nThumbs/2),t=1-this.nThumbs%2;return this.select<=e?(this.$set(this,"beginThumbIndex",0),this.$set(this,"thumbSelect",this.select),void this.$set(this,"displayThumbs",this.images.slice(0,this.nThumbs))):this.select>=this.countImages-e?(this.$set(this,"beginThumbIndex",this.countImages-this.nThumbs),this.$set(this,"thumbSelect",this.nThumbs-(this.countImages-this.select)),void this.$set(this,"displayThumbs",this.images.slice(-this.nThumbs))):(this.$set(this,"beginThumbIndex",this.select-e+t),this.$set(this,"thumbSelect",e-t),void this.$set(this,"displayThumbs",this.images.slice(this.select-e+t,this.select+e+1)))}},methods:{showImage:function(e){this.$set(this,"lightBoxOn",!0),this.$set(this,"select",e)},closeLightBox:function(){this.$set(this,"lightBoxOn",!1)},nextImage:function(){this.$set(this,"select",(this.select+1)%this.countImages)},previousImage:function(){this.$set(this,"select",(this.select-1+this.countImages)%this.countImages)}}}},function(e,t){},function(e,t){e.exports='<div class=vue-lb-container v-show=lightBoxOn @keydown.37.stop.prevent=previousImage @keydown.39.stop.prevent=nextImage @keydown.27.stop.prevent=closeLightbox _v-4f419e0e=""> <div class=vue-lb-content _v-4f419e0e=""> <div class=vue-lb-header _v-4f419e0e=""> <span _v-4f419e0e=""></span> <button type=button title="Close (Esc)" class=vue-lb-button-close @click=closeLightBox _v-4f419e0e=""> <span _v-4f419e0e=""> <svg fill=white version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=100% height=100% viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space=preserve _v-4f419e0e=""> <path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z" _v-4f419e0e=""></path> </svg> </span> </button> </div> <div class=vue-lb-figure _v-4f419e0e=""> <img :src=images[select].src class=vue-lb-modal-image _v-4f419e0e=""> <div class=vue-lb-info v-html=images[select].caption _v-4f419e0e=""></div> <div class=vue-lb-footer _v-4f419e0e=""> <div class=vue-lb-footer-info _v-4f419e0e=""></div> <div class=vue-lb-footer-count _v-4f419e0e=""> {{ select + 1 }}/{{ countImages }} </div> </div> </div> </div> <div v-if=showThumbs class=vue-lb-thumbnail _v-4f419e0e=""> <button type=button class="vue-lb-thumbnail-arrow vue-lb-thumbnail-left" title=Previous @click=previousImage _v-4f419e0e=""> <span _v-4f419e0e=""> <svg fill=white version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=100% height=100% viewBox="0 0 512 512" xml:space=preserve _v-4f419e0e=""> <path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z" _v-4f419e0e=""></path> </svg> </span> </button> <div v-for="(image, index) in displayThumbs" :key=image.src :class="\'vue-lb-modal-thumbnail\' + (thumbSelect === index ? \'-active\' : \'\')" :style="`background-image: url(\'${ image.thumb }\')`" @click="showImage(index + beginThumbIndex)" _v-4f419e0e=""> </div> <button type=button class="vue-lb-thumbnail-arrow vue-lb-thumbnail-right" title=Next @click=nextImage _v-4f419e0e=""> <span _v-4f419e0e=""> <svg fill=white version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=100% height=100% viewBox="0 0 512 512" xml:space=preserve _v-4f419e0e=""> <path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z" _v-4f419e0e=""></path> </svg> </span> </button> </div> <button type=button class="vue-lb-arrow vue-lb-left" title=Previous @click=previousImage _v-4f419e0e=""> <span _v-4f419e0e=""> <svg fill=white version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=100% height=100% viewBox="0 0 512 512" xml:space=preserve _v-4f419e0e=""> <path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z" _v-4f419e0e=""></path> </svg> </span> </button> <button type=button class="vue-lb-arrow vue-lb-right" title=Next @click=nextImage _v-4f419e0e=""> <span _v-4f419e0e=""> <svg fill=white version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=100% height=100% viewBox="0 0 512 512" xml:space=preserve _v-4f419e0e=""> <path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z" _v-4f419e0e=""></path> </svg> </span> </button> </div> '},function(e,t,s){var i,l,n={};s(2),i=s(1),l=s(3),e.exports=i||{},e.exports.__esModule&&(e.exports=e.exports.default);var o="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;l&&(o.template=l),o.computed||(o.computed={}),Object.keys(n).forEach(function(e){var t=n[e];o.computed[e]=function(){return t}})}]);
//# sourceMappingURL=vue-image-lightbox.min.js.map