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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35718410/article/details/52174061

今天给大家带来的是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"   表示这个元素要启用lightbox
data-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图片画廊就大功告成了

没有更多推荐了,返回首页