https://gupthagem.com/js/lightbox.min.js

1/*lightbox图片展示插件
2此版本不兼容ie9以下*/
3;(function($){var LightBox=function(settings){var self=this;this.settings={speed:500};$.extend(this.settings,settings||{});this.popupMask=$('<div id="lb-mask">');this.popupWin=$('<div id="lb-popup">');this.body=$(document.body);this.renderDOM();this.picViewArea=this.popupWin.find(".lb-pic-view");this.popupPic=this.popupWin.find('.lb-img');this.picCaptionArea=this.popupWin.find('.lb-pic-caption');this.nextBtn=this.popupWin.find('.lb-next-btn');this.prevBtn=this.popupWin.find('.lb-prev-btn');this.captionTxt=this.popupWin.find('.lb-pic-desc');this.currentIndex=this.popupWin.find('.lb-of-index');this.closeBtn=this.popupWin.find('.lb-close-btn');this.groupName=null;this.groupData=[];this.body.on('click','js-lightbox,*[data-role=lightbox]',function(e){e.stopPropagation();var currentGroupName=$(this).attr('data-group');if(currentGroupName!=self.groupName){self.groupName=currentGroupName;self.getGroup()}self.initPopup($(this))});this.popupMask.click(function(){$(this).fadeOut();self.popupWin.fadeOut();this.clear=false});this.closeBtn.click(function(){self.popupMask.fadeOut();self.popupWin.fadeOut();this.clear=false});this.flag=true;this.prevBtn.hover(function(){if(!$(this).hasClass('disabled')&&self.groupData.length>1){$(this).addClass('lb-prev-btn-show')}},function(){if(!$(this).hasClass('disabled')&&self.groupData.length>1){$(this).removeClass('lb-prev-btn-show')}}).click(function(e){if(!$(this).hasClass('disabled')&&self.flag){self.flag=false;e.stopPropagation();self.goto("prev")}});this.nextBtn.hover(function(){if(!$(this).hasClass('disabled')&&self.groupData.length>1){$(this).addClass('lb-next-btn-show')}},function(){if(!$(this).hasClass('disabled')&&self.groupData.length>1){$(this).removeClass('lb-next-btn-show')}}).click(function(e){if(!$(this).hasClass('disabled')&&self.flag){self.flag=false;e.stopPropagation();self.goto("next")}});var timer=null;this.clear=false;$(window).resize(function(){if(self.clear){window.clearTimeout(timer);timer=window.setTimeout(function(){self.loadPic(self.groupData[self.index].src)},500)}}).keyup(function(e){var keyVal=e.which;if(self.clear){if(keyVal==38||keyVal==37){self.prevBtn.click()}if(keyVal==39||keyVal==40){self.nextBtn.click()}}})};LightBox.prototype={goto:function(dir){if(dir==="next"){this.index++;if(this.index>=this.groupData.length-1){this.nextBtn.addClass('disabled').removeClass('lb-next-btn-show')}if(this.index!=0){this.prevBtn.removeClass('disabled')}var src=this.groupData[this.index].src;this.loadPic(src)}else if(dir="prev"){this.index--;if(this.index<=0){this.prevBtn.addClass('disabled').removeClass('lb-prev-btn-show')}if(this.index!=this.groupData.length-1){this.nextBtn.removeClass('disabled')}var src=this.groupData[this.index].src;this.loadPic(src)}},show:function(sourceSrc,currentId){var self=this;this.popupPic.hide();this.picCaptionArea.hide();this.popupMask.fadeIn();var winW=$(window).width()>self.settings.maxWidth?self.settings.maxWidth:$(window).width();var winH=$(window).height()>self.settings.maxHeight?self.settings.maxHeight:$(window).height();this.picViewArea.css({width:winW/2+'px',height:winH/2+'px'});this.popupWin.fadeIn();var viewH=$(window).height()/2+10;this.popupWin.css({width:winW/2+10+'px',height:winH/2+10+'px',marginLeft:-(winW/2+10)/2+'px',top:-viewH+'px'}).animate({top:($(window).height()-viewH)/2+'px'},self.settings.speed,function(){self.loadPic(sourceSrc)});this.index=this.getIndex(currentId);var groupDataLen=this.groupData.length;if(groupDataLen>1){if(this.index===0){this.prevBtn.addClass('disabled');this.nextBtn.removeClass('disabled')}else if(this.index===groupDataLen-1){this.nextBtn.addClass('disabled');this.prevBtn.removeClass('disabled')}else{this.prevBtn.removeClass('disabled');this.nextBtn.removeClass('disabled')}}},loadPic:function(sourceSrc){var self=this;self.popupPic.css({width:'auto',height:'auto'}).hide();self.picCaptionArea.hide();this.preLoadPic(sourceSrc,function(){self.popupPic.attr('src',sourceSrc);var picW=self.popupPic.width();var picH=self.popupPic.height();self.changePic(picW,picH)})},preLoadPic:function(src,callback){var img=new Image();if(!!window.ActiveXObject){img.onreadystatechange=function(){if(this.readystate=='complete'){callback()}}}else{img.onload=function(){callback()}}img.src=src},changePic:function(picW,picH){var self=this;var winW=$(window).width()>self.settings.maxWidth?self.settings.maxWidth:$(window).width();var winH=$(window).height()>self.settings.maxHeight?self.settings.maxHeight:$(window).height();var scale=Math.min(winW/(picW+10),winH/(picH+10),1);picW=picW*scale;picH=picH*scale;self.picViewArea.animate({width:picW-10+'px',height:picH-10+'px'},self.settings.speed);self.popupWin.animate({width:picW+'px',height:picH+'px',marginLeft:-picW/2+'px',top:($(window).height()-picH)/2+'px'},self.settings.speed,function(){self.popupPic.css({width:picW-10,height:picH-10}).fadeIn();self.picCaptionArea.fadeIn();self.flag=true;self.clear=true});this.captionTxt.text(this.groupData[this.index].caption);this.currentIndex.text(`${this.index+1}/${this.groupData.length}`);},getIndex:function(currentId){var index=0;$(this.groupData).each(function(i){index=i;if(this.id===currentId){return false;}});return index;},initPopup:function(oCurrent){var self=this,sourceSrc=oCurrent.attr('data-source'),currentId=oCurrent.attr('data-id');this.show(sourceSrc,currentId);},getGroup:function(){var self=this;var groupList=this.body.find('*[data-group='+this.groupName+']');self.groupData=[];groupList.each(function(){self.groupData.push({src:$(this).attr('data-source'),id:$(this).attr('data-id'),caption:$(this).attr('data-caption')});});},renderDOM:function(){var sDOM="";sDOM+='<div class="lb-pic-view">';sDOM+='<i class="lb-btn lb-prev-btn"></i>';sDOM+='<img class="lb-img">';sDOM+='<i class="lb-btn lb-next-btn"></i>';sDOM+='</div>';sDOM+='<div class="lb-pic-caption">';sDOM+='<div class="lb-caption-area">';sDOM+='<p class="lb-pic-desc"></p>';sDOM+='<span class="lb-of-index">0 of 0</span>';sDOM+='</div>';sDOM+='<i class="lb-close-btn"></i>';sDOM+='</div>';this.popupWin.html(sDOM);this.body.append(this.popupMask,this.popupWin)}};window.LightBox=LightBox})($);