漂亮的LightBox图片画廊插件开发

今天给大家带来的是LightBox图片画廊插件的实现方法，用jQuery制作出一款简洁、漂亮的图片画廊，下面我们先看一下实现的效果：

功能点如下：

1.点击小图片，弹出对应的大图片

2.每次点击小图或者点击切换按钮切换图片时，在加载图片时会有加载动画效果

3.每张大图片出来时，从屏幕上方以动画效果出来

4.加载时宽高各为屏幕宽高的一半，加载完成显示的图片大小为图片实际大小（这个效果也比较好看，由小到大的动画）

5.每张小图片对应的大图片尺寸不一，弹出的图片显示的高度和宽度也是变化的

6.鼠标悬浮在图片左侧或者右侧会有切换图片，点击即可切换图片

7.图片下方有图片描述和索引

8.点击黑色遮罩层即可关闭图片，点击在图片右下角的关闭按钮也可关闭图片

这是我们最终实现的效果图，点击小图片之后弹出的对应的大图，中间有过渡动画，效果非常好看。下面我们来看一下LightBox插件的实现方法

一、首先我们要引入jQuery，我这里用的是2.1.1版本的

<script src="js/jquery-2.1.1.js"></script>

二、引入好jQuery后，在我们显示小图片的地方加入以下HTML代码：

<h1>第一组图片</h1><div>    <img data-role="lightbox" data-source="Images/1-1.jpg" data-group="group-1" data-id="1" data-caption="风景名画" width="100" height="100" src="Images/1-1.jpg"/>    <img data-role="lightbox" data-source="Images/1-2.jpg" data-group="group-1" data-id="2" data-caption="非常好看的图片" width="100" height="100" src="Images/1-2.jpg"/>    <img data-role="lightbox" data-source="Images/1-3.jpg" data-group="group-1" data-id="3" data-caption="风景图鉴赏" width="100" height="100" src="Images/1-3.jpg"/>    <img data-role="lightbox" data-source="Images/1-4.jpg" data-group="group-1" data-id="4" data-caption="名图赏析" width="100" height="100" src="Images/1-4.jpg"/>    <img data-role="lightbox" data-source="Images/1-5.jpg" data-group="group-1" data-id="5" data-caption="图片之家" width="100" height="100" src="Images/1-5.jpg"/>    <img data-role="lightbox" data-source="Images/1-6.jpg" data-group="group-1" data-id="6" data-caption="大家跟我来赏图" width="100" height="100" src="Images/1-6.jpg"/></div><h1>第二组图片</h1><div>    <img data-role="lightbox" data-source="Images/2-1.jpg" data-group="group-2" data-id="1" data-caption="美图" width="100" height="100" src="Images/2-1.jpg"/>    <img data-role="lightbox" data-source="Images/2-2.jpg" data-group="group-2" data-id="2" data-caption="好图看不停" width="100" height="100" src="Images/2-2.jpg"/>    <img data-role="lightbox" data-source="Images/2-3.jpg" data-group="group-2" data-id="3" data-caption="美图秀秀" width="100" height="100" src="Images/2-3.jpg"/>    <img data-role="lightbox" data-source="Images/2-4.jpg" data-group="group-2" data-id="4" data-caption="世界超跑" width="100" height="100" src="Images/2-4.jpg"/>    <img data-role="lightbox" data-source="Images/2-5.jpg" data-group="group-2" data-id="5" data-caption="豪车欣赏" width="100" height="100" src="Images/2-5.jpg"/>    <img data-role="lightbox" data-source="Images/2-6.jpg" data-group="group-2" data-id="6" data-caption="世界名车" width="100" height="100" src="Images/2-6.jpg"/></div><h1>第三组图片</h1><div>    <img data-role="lightbox" data-source="Images/3-1.jpg" data-group="group-3" data-id="1" data-caption="美丽的花朵" width="100" height="100" src="Images/3-1.jpg"/>    <img data-role="lightbox" data-source="Images/3-2.jpg" data-group="group-3" data-id="2" data-caption="苹果logo" width="100" height="100" src="Images/3-2.jpg"/>    <img data-role="lightbox" data-source="Images/3-3.jpg" data-group="group-3" data-id="3" data-caption="山涧小溪" width="100" height="100" src="Images/3-3.jpg"/>    <img data-role="lightbox" data-source="Images/3-4.jpg" data-group="group-3" data-id="4" data-caption="破土而生" width="100" height="100" src="Images/3-4.jpg"/>    <img data-role="lightbox" data-source="Images/3-5.jpg" data-group="group-3" data-id="5" data-caption="黄昏美景" width="100" height="100" src="Images/3-5.jpg"/>    <img data-role="lightbox" data-source="Images/3-6.jpg" data-group="group-3" data-id="6" data-caption="美不胜收" width="100" height="100" src="Images/3-6.jpg"/></div>

这样三组小图片就在我们的页面中创建好了，效果如下：

我们要实现点击小图片，弹出对应的大图片的效果，并且弹出的图片水平垂直居中显示。在img标签中，我们定义了几个自定义属性，他们的作用如下：

data-role="lightbox"   表示这个元素要启用lightboxdata-source=""         点开之后放大版图片的地址data-group=""          标示当前图片的组别data-id=""             图片的唯一标示data-caption=""        当前图片的描述文字

三、CSS样式

样式我写好了，粘在下面，大家直接拷过去放在css文件里用就好了

body,div,dl,dd,dt,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:after,a:before{content:'';}abbr,acronym{border:0;}body{font:12px/1.5 '微软雅黑',tahoma,arial,'Hiragino Sans GB',宋体,sans-serif;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:'';clear:both;height:0;}.clearfix{zoom:1;}.text-ellipsis{white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;}#G-lightbox-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#000;opacity:.5;z-index:10000;display:none;}#G-lightbox-popup{position:fixed;left:50%;top:0;z-index:10001;display:none;}#G-lightbox-popup .lightbox-pic-view{position:relative;border:5px solid #fff;border-radius:3px;    overflow: hidden;    background:#fff url(../Images/loading.gif) no-repeat center center;}#G-lightbox-popup .lightbox-pic-view .lightbox-btn{position:absolute;top:0;width:40%;height:100%;z-index:1;}#G-lightbox-popup .lightbox-pic-view .lightbox-prev-btn{left:0;}#G-lightbox-popup .lightbox-pic-view .lightbox-next-btn{right:0;}#G-lightbox-popup .lightbox-pic-view .lightbox-prev-btn-show{background:url(../Images/prev.png) no-repeat left center;}#G-lightbox-popup .lightbox-pic-view .lightbox-next-btn-show{background:url(../Images/next.png) no-repeat right center;}#G-lightbox-popup .lightbox-pic-view .lightbox-image{display:block;}#G-lightbox-popup .lightbox-pic-caption{position:relative;margin:0 5px;margin-top:-60px;background:rgba(0,0,0,.5);}#G-lightbox-popup .lightbox-pic-caption .lightbox-caption-area{color:#fff;padding:10px 5px;}#G-lightbox-popup .lightbox-pic-caption .lightbox-caption-area .lightbox-of-index{color:#999;}#G-lightbox-popup .lightbox-pic-caption .lightbox-close-btn{position:absolute;width:27px;height:27px;    background:url(../Images/close.png) no-repeat center center;     right:10px;    top:13px;    z-index:2;    cursor:pointer;}

四、开始LightBox插件开发

我们先创建一个lightbox.js文件，放在我们项目的js文件夹下，然后打开lightbox.js文件进行代码编写。

JS代码部分如下：

(function($){    var LightBox=function(){        var self=this;        //创建遮罩和弹出框        this.popupMask=$('<div id="G-lightbox-mask"></div>');        this.popupWin=$('<div id="G-lightbox-popup"></div>');        //保存BODY        this.bodyNode=$(document.body);        //渲染剩余的DOM，并且插入到BODY        this.renderDOM();        this.picViewArea=this.popupWin.find("div.lightbox-pic-view");       //图片预览区域        this.popupPic     =this.popupWin.find("img.lightbox-image");               //图片区域        this.picCaptionArea=this.popupWin.find("div.lightbox-pic-caption");     //图片描述区域        this.nextBtn    =this.popupWin.find("span.lightbox-next-btn");        this.prevBtn    =this.popupWin.find("span.lightbox-prev-btn");        this.captionText=this.popupWin.find("p.lightbox-pic-desc");            //图片描述        this.currentIndex=this.popupWin.find("span.lightbox-of-index");        //图片索引        this.closeBtn   =this.popupWin.find("span.lightbox-close-btn");        //关闭按钮        //准备开发事件委托，获取组数据，如果不委托给body，后续加载出来的图片还要在绑定事件        this.groupName=null;        this.groupData=[];           //放置同一组数据        this.bodyNode.delegate("*[data-role=lightbox]","click",function(e){            //阻止事件冒泡            self.stopBubble(e);            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.closeBtn.click(function(){            self.popupMask.fadeOut();            self.popupWin.fadeOut();        });        //绑定上下切换按钮事件        this.nextBtn.hover(function(){            if(!$(this).hasClass("disabled")&&self.groupData.length>1){                $(this).addClass("lightbox-next-btn-show");                $(this).css("cursor","pointer")            }        },function(){            $(this).removeClass("lightbox-next-btn-show");        }).click(function(e){            if(!$(this).hasClass("disabled")){                self.stopBubble(e);                self.goto("next");            }        });        this.prevBtn.hover(function(){            if(!$(this).hasClass("disabled")&&self.groupData.length>1){                $(this).addClass("lightbox-prev-btn-show");                $(this).css("cursor","pointer")            }        },function(){            $(this).removeClass("lightbox-prev-btn-show");        }).click(function(e){            if(!$(this).hasClass("disabled")){                self.stopBubble(e);                self.goto("prev");            }        });    }    LightBox.prototype.renderDOM= function(){            var strDom='<div class="lightbox-pic-view">'+            '<span class="lightbox-btn lightbox-prev-btn"></span>'+            '<img class="lightbox-image" src=""/>'+            '<span class="lightbox-btn lightbox-next-btn"></span>'+            '</div>'+            '<div class="lightbox-pic-caption">'+            '<div class="lightbox-caption-area">'+            '<p class="lightbox-pic-desc">ppppppp</p>'+            '<span class="lightbox-of-index">当前索引：0 of 0</span>'+            '</div>'+            '<span class="lightbox-close-btn"></span>'+            '</div>';            //插入到this.popupWin            this.popupWin.html(strDom);            //把遮罩和弹出框插入到body对象            this.bodyNode.append(this.popupMask,this.popupWin);        }    LightBox.prototype.getGroup=function(){        var self=this;        //每次都先清空数组数据再获取，要不会把获取的数据追加到上一个组的数据后面        this.groupData=[];        //根据当前的组别名称获取页面中所有相同组别的对象        var groupList=this.bodyNode.find("*[data-group="+this.groupName+"]");        groupList.each(function(){            self.groupData.push({                src:$(this).attr("data-source"),                id:$(this).attr("data-id"),                caption:$(this).attr("data-caption")            });        });    }    LightBox.prototype.initPopup=function(currentObj){        var self      =  this,            sourceSrc  = currentObj.attr("data-source"),            currentId  =currentObj.attr("data-id");        this.showMaskAndPopup(sourceSrc,currentId);    }    LightBox.prototype.showMaskAndPopup=function(sourceSrc,currentId){        var self=this;        this.popupPic.hide();        this.picCaptionArea.hide();        this.popupMask.fadeIn();        var winWidth=$(window).width();        var winHeight=$(window).height();        this.picViewArea.css({            "width":winWidth/2,            "height":winHeight/2        });        this.popupWin.fadeIn();        var viewHeight=winHeight/2+10;        this.popupWin.css({            "width":winWidth/2+10,            "height":viewHeight,            "marginLeft":-(winWidth/2+10)/2,            "top":-viewHeight        }).animate({            "top":(winHeight-viewHeight)/2        },function(){            //加载弹出的图片            self.loadPicSize(sourceSrc);        });        //根据当前点击的元素id获取在当前组别里面的索引        this.index=this.getIndexOf(currentId);        //判断是否显示左右切换图片的按钮        var groupDataLength=this.groupData.length;        //如果组里面只有一张图片就不操作        if(groupDataLength>1){            if(this.index===1){                this.prevBtn.addClass("disabled");                this.nextBtn.removeClass("disabled");            }else if(this.index===groupDataLength){                this.nextBtn.addClass("disabled");                this.prevBtn.removeClass("disabled");            }else{                this.nextBtn.removeClass("disabled");                this.prevBtn.removeClass("disabled");            }        }    }    LightBox.prototype.getIndexOf=function(currentId){        var index=0;        $(this.groupData).each(function(){            index++;            if(this.id===currentId){                return false;       //当找到对应id时，退出each循环            }        });        return index;    }    LightBox.prototype.loadPicSize=function(sourceSrc){        var self=this;        //每次加载图片前，先设置宽高auto，否则下次加载的图片跟上次宽高一样        self.popupPic.css({"width":"auto","height":"auto"}).hide();        //预加载图片方法        this.preLoadImg(sourceSrc,function(){            self.popupPic.attr("src",sourceSrc);            var picWidth=self.popupPic.width();            var picHeight=self.popupPic.height();            self.changePic(picWidth,picHeight);        });    }    //监控图片是否加载完成,完成就执行回调函数    LightBox.prototype.preLoadImg=function(src,callback){        var img=new Image();        if(window.ActiveXObject){     //IE浏览器            img.onreadystatechange=function(){                if(this.readyState=="complete"){                    callback();                }            }        }else{                          //其他浏览器            img.onload=function(){                callback();            }        }        img.src=src;    }    LightBox.prototype.changePic=function(width,height){        var self=this;        var winWidth=$(window).width();        var winHeight=$(window).height();        //如果图片的宽高大于浏览器视口的宽高比，就要看下图片是否溢出        var scale=Math.min(winWidth/(width+10),winHeight/(height+10),1);        width=width*scale;        height=height*scale;        this.picViewArea.animate({            "width":width-10,            "height":height-10        });        this.popupWin.animate({            "width":width,            "height":height,            "marginLeft":-(width/2),            "top":(winHeight-height)/2        },function(){            self.popupPic.css({                "width":width-10,                "height":height-10            }).fadeIn();            self.picCaptionArea.fadeIn();        });        //设置描述文字和当前索引        this.captionText.text(this.groupData[this.index-1].caption);        this.currentIndex.text("当前索引："+this.index+" of "+this.groupData.length);    }    //上下切换图片的方法    LightBox.prototype.goto=function(dir){        if(dir==="next"){            this.index++;            if(this.index>=this.groupData.length){                this.nextBtn.addClass("disabled").removeClass("lightbox-next-btn-show");            }            if(this.index!==1){                this.prevBtn.removeClass("disabled");            }        }else if(dir==="prev"){            this.index--;            if(this.index===1){                this.prevBtn.addClass("disabled").removeClass("lightbox-prev-btn-show");            }            if(this.index<=this.groupData.length){                this.nextBtn.removeClass("disabled");            }        }        var src=this.groupData[this.index-1].src;        this.loadPicSize(src);    }    LightBox.prototype.stopBubble=function(e){        if(e.cancelBubble){     //IE浏览器            e.cancelBubble=true;        }else{                  //其他浏览器            e.stopPropagation();        }    }    window["LightBox"]=LightBox;})(jQuery);

五、创建LightBox对象

写好js后，我们有了LightBox的构造器函数，就可以实例化LightBox对象了，在我们自己的js中加入如下代码：

var lightbox=new LightBox();

这样我们的LightBox图片画廊就大功告成了