基于jQuery的图片画廊、lightbox插件效果

图片演示:

使用说明：

第一步:首先你要在页面中引入一下文件，注意先后顺序

<link rel="stylesheet" type="text/css" href="css/album-lightbox.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/album.js"></script>

第二部

<div>
<h1>第一组图片</h1>
<a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="testImages/1.jpg" data-title="这是一个可爱的小妞" href="javascript:void(0);"><img height="50" src="testImages/1-1.jpg" /></a>
<a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="testImages/2.jpg" data-title="你知道这个车是多前嘛" href="javascript:void(0);"><img height="50" src="testImages/2-1.jpg" /></a>
<a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="testImages/3.jpg" data-title="再多的冯绍峰的身份哇塞的的粉色外电风扇" href="javascript:void(0);"><img height="50" src="testImages/3-1.jpg" /></a>
</div>

看下以上页面渲染结构，一组图片就是多个“<a data-origin-src="这是源图地址"><img src="这是页面中小的预览图"></a>”这样结构的组合。

下面介绍下参数设置：

 data-role="album"--->这个是必须存在且参数名是固定的，用来查找它是否用来渲染相册功能
 data-sort="example-2"--->这个表示一组图片的组名，如果好几张图片属于同一组，那么这几张图片的参数值就是相同的
 data-origin-src="testImages/1.jpg"--->顾名思义，这个就是用来存储图片源文件地址的
 data-title="这是一个可爱的小妞"--->这个事用来定义这张图片的描述的

友情提示:

页面中图片元素的渲染，此插件使用全局body事件委托机制，无需关注图片是什么时候载入页面的，

源码CSS文件：

.G-AlbumOverlay{display:none; position:fixed;_position:absolute;left:0;top:0;100%;height:100%; background-color:#000; opacity:.6;filter:alpha(opacity:60); z-index:9999;}
.G-AlbumPopup{display:none; position:absolute;top:50px;left:0px;100%; z-index:10000;}
.G-AlbumPopup .albumPictureOfIndex .pictureCaption,.G-AlbumPopup .albumPictureOfIndex .pictureOfIndex{display:block;}
.G-AlbumPopup .albumPictures,.G-AlbumPopup .albumPictureOfIndex{ position:relative;500px; margin:0 auto;}
.G-AlbumPopup .albumPictures{height:500px; border:5px solid #fff;border-radius:5px; background-color:#fff; overflow:hidden;}
.G-AlbumPopup .albumPictureOfIndex{display:none;color:#eee; margin-top:5px;}
.G-AlbumPopup .albumPictureOfIndex .pictureOfIndex span{ margin-right:5px;color:#999;}
.G-AlbumPopup .albumPictures span{ position:absolute;top:0; display:block;height:100%;50%; background-color:transparent; cursor:pointer; opacity:0;filter:alpha(opacity:0);z-index:2;}
.G-AlbumPopup .albumPictures .prevBtn{left:0; background:url(../img/prev.png) no-repeat left center;}
.G-AlbumPopup .albumPictures .nextBtn{right:0; background:url(../img/next.png) no-repeat right center;}
.G-AlbumPopup .albumPictures .disable{display:none; cursor:default;}
.G-AlbumPopup .albumPictures .hover{ opacity:1;filter:alpha(opacity:100);}
.G-AlbumPopup .albumPictures .loading{ position:absolute;left:50%;top:50%; margin:-16px 0 0 -16px;display:block;32px;height:32px; background:url(../img/loading.gif) no-repeat center center;}
.G-AlbumPopup .albumPictureOfIndex .colseAlbumBtn{ position:absolute;right:0px;top:5px;display:block;27px;height:27px; background:url(../img/close.png) no-repeat center center;}
.G-AlbumPopup .albumPictures .picture{display:none;}

用到的ICON图标：

DOM结构演示：

<div>
<h1>第一组图片</h1>
<a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="testImages/1.jpg" data-title="这是一个可爱的小妞" href="javascript:void(0);">
<img height="50" src="testImages/1-1.jpg" /></a>
<a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="testImages/2.jpg" data-title="你知道这个车是多前嘛" href="javascript:void(0);"><img height="50" src="testImages/2-1.jpg" /></a>
<a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="testImages/3.jpg" data-title="再多的冯绍峰的身份哇塞的的粉色外电风扇" href="javascript:void(0);"><img height="50" src="testImages/3-1.jpg" /></a>
</div>
   
<div>
<h1>第二组图片</h1>
<a class="J_AlbumItem" data-role="album" data-sort="example-1" data-origin-src="testImages/4.jpg" data-title="额范围分为分王菲王菲王菲 额度为EVA" href="javascript:void(0);"><img height="50" src="testImages/4-1.jpg" /></a>
<a class="J_AlbumItem" data-role="album" data-sort="example-1" data-origin-src="testImages/5.jpg" data-title="青岛前雾灯阿瓦的非常多色粉" href="javascript:void(0);"><img height="50" src="testImages/5-1.jpg" /></a>
<a class="J_AlbumItem" data-role="album" data-sort="example-1" data-origin-src="testImages/6.jpg" data-title="阿瓦的期望的服务的未拆封阿什顿长撒分为" href="javascript:void(0);"><img height="50" src="testImages/6-1.jpg" /></a>
<a class="J_AlbumItem" data-role="album" data-sort="example-1" data-origin-src="testImages/7.jpg" data-title="额外地方额外氛围分额外分为V大纷纷认为" href="javascript:void(0);"><img height="50" src="testImages/7-1.jpg" /></a>
</div>

<h1>第三组图片</h1>
<a class="J_AlbumItem" data-role="album" data-sort="example-3" data-origin-src="testImages/8.jpg" data-title="这是一个可爱的小妞" href="javascript:void(0);"><img height="50" src="testImages/8-1.jpg" /></a>
19 </div>

源码JS：

/**
*图片画廊效果插件v1.0.1
*自由修改CSS实现自定义效果
*name:杨永
*QQ  :377746756
*/
(function($){
    function Album(args){
        var _this_=this;
        //初始化参数
        this.setting={
                isShowCaption:true,//是否显示图片title
                isShowIndex:true,  //是否显示索引值
                isShowColseBtn:true//是否显示关闭按钮
            };
        //如果配置了参数，就覆盖默认参数
        if(args){
            $.extend(this.setting,args);
        };
        //创建蒙层#J_AlbumOverlay和相册弹出区域J_AlbumLightBox
        this.albumOverlayDiv=$('<div id="J_AlbumOverlay" class="G-AlbumOverlay">');
        this.albumLightDiv=$('<div id="J_AlbumLightBox" class="G-AlbumPopup">');
        //存储body
        this.bodyNode=$("body");
        //构建结构到body下
        this.build();
        //所需结构创建好后,获取操作对象
        this.albumPicturesDiv=this.albumLightDiv.find(".albumPictures");
        this.albumPictureOfIndexDiv=this.albumLightDiv.find(".albumPictureOfIndex");
        this.prevBtn=this.albumLightDiv.find(".prevBtn");
        this.nextBtn=this.albumLightDiv.find(".nextBtn");
        this.loadPicture=this.albumLightDiv.find(".picture");
        this.loading=this.albumLightDiv.find(".loading");
        this.colseAlbumBtn=this.albumLightDiv.find(".colseAlbumBtn");
        this.pictureCaption=this.albumLightDiv.find(".pictureCaption");
        this.curNum=this.albumLightDiv.find(".curNum");
        this.totalNum=this.albumLightDiv.find(".totalNum");
        //标识点击的类别名称,存储同类别的数组,当前点击对象的索引位置,防止狂点
        this.sortName="null";
        this.albumArray=[];
        this.curIndex=0;
        this.imgLoadStatus=true;
        //事件委托到body
        this.bodyNode.delegate("a[data-role=album],a.J_AlbumItem","click",function(){
            var sortName=$(this).attr("data-sort"),
                title   =$(this).attr("data-title");
            //根据点击的类别，查找页面中所有的同类别元素
            if(_this_.sortName!=sortName){//防止在同一个类别上点击继续查找
                _this_.findSortList(sortName);
                //设置图片总数到节点上
                _this_.totalNum.text(_this_.albumArray.length);
            };
            //获取当前点击对象在存储数组中的索引位置
            _this_.curIndex=_this_.getCurIndex($(this).attr("data-origin-src"));
            //相册数组和当前点击的索引准备好后，初始化控件
            _this_.initPopup($(this).attr("data-origin-src"),title);
        });
        //绑定事件
        this.prevBtn.hover(function(){
            if(!$(this).hasClass("disable")){
                $(this).addClass("hover");
            };
        },function(){
            if(!$(this).hasClass("disable")){
                $(this).removeClass("hover");
            };
        }).click(function(){
            //如果下一张图片还没有载入完毕,不让重复点击
            if(_this_.imgLoadStatus){
                _this_.imgLoadStatus=false;
                if(!$(this).hasClass("disable")){
                    _this_.prevTo($(this));
                };
            };
        });
        this.nextBtn.hover(function(){
            if(!$(this).hasClass("disable")){
                $(this).addClass("hover");
            };
        },function(){
            if(!$(this).hasClass("disable")){
                $(this).removeClass("hover");
            };
        }).click(function(){
            if(_this_.imgLoadStatus){
                _this_.imgLoadStatus=false;
                if(!$(this).hasClass("disable")){
                    _this_.nextTo($(this));
                };
            };
        });
        
        this.colseAlbumBtn.click(function(){
            _this_.closeAlbum();
        });
        this.albumOverlayDiv.click(function(){
            _this_.closeAlbum();
        });
        this.albumLightDiv.click(function(){
            _this_.closeAlbum();
        });
        this.albumPicturesDiv.click(function(e){
            e.stopPropagation();
        });
        this.albumPictureOfIndexDiv.click(function(e){
            e.stopPropagation();
        });
    };
    Album.prototype={
        //初始化弹窗
        initPopup:function(curUrl,title){
            var _self=this;
            //根据当前索引和相册图片数设置上下切换按钮
            if(this.curIndex==0){
                this.prevBtn.addClass("disable");
            }else{
                this.prevBtn.removeClass("disable");
            };
            if(this.curIndex==this.albumArray.length-1){
                this.nextBtn.addClass("disable");
            }else{
                this.nextBtn.removeClass("disable");
            };
            //设置title
            this.pictureCaption.html(title);
            /*加载图片，获取图片尺寸，滚动条位置，窗口大小开发*/
            this.albumLightDiv.css("top",$(document).scrollTop()+50);
            //当弹出浮出后切换图片
            this.loadPicture.hide();
            this.loading.show();
            this.albumOverlayDiv.fadeIn("slow",function(){
                _self.changeImage(curUrl);
            });
            this.albumLightDiv.fadeIn();
        },
        //向上切换
        prevTo:function(self){
            this.curIndex--;
            if(this.curIndex!=this.albumArray.length-1){
                this.nextBtn.removeClass("disable hover");
            };
            if(this.curIndex<=0){
                self.addClass("disable");
            };
            this.changeImage(this.albumArray[this.curIndex].src);
            this.pictureCaption.html(this.albumArray[this.curIndex].title);
        },
        //向下切换
        nextTo:function(self){
            this.curIndex++;
            if(this.curIndex!=0){
                this.prevBtn.removeClass("disable hover");
            };
            if(this.curIndex>=this.albumArray.length-1){
                self.addClass("disable");
            };
            this.changeImage(this.albumArray[this.curIndex].src);
            this.pictureCaption.html(this.albumArray[this.curIndex].title);
        },
        //切换图片
        changeImage:function(src){
            var _self=this;
            //显示加载等待图片
            this.loading.show();
            this.albumPictureOfIndexDiv.hide();
            this.loadPicture.css({"auto",height:"auto"}).hide();
            //等待图片加载完成
            this.preLoadImg(src,function(){
                //设置当前索引和title到对应节点上
                _self.curNum.text(_self.curIndex+1);
                //替换图片
                _self.loadPicture.prop("src",src);
                //设置lightbox的尺寸
                var width=_self.loadPicture.width(),
                    height=_self.loadPicture.height();
                _self.setAlbumSize(width,height);
            });
        },
        //更具浏览器窗口大小处理下width,height
        filterWH:function(width,height){
            var bili=height/width;
            var clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
                clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
            
            if(height<=clientHeight&&width<=clientWidth){
                height=height;
                width=width;
            };
            //切换时计算尺寸
            if(height>=clientHeight){
                height=clientHeight-150;
                width=height/bili;
            };
            return {width,height:height};
        },
        //设置lightbox的尺寸
        setAlbumSize:function(width,height){
            var _self=this;
            //更具浏览器窗口大小处理下width,height
            var filter=this.filterWH(width,height);
            //设置图片区域和下面的文字说尺寸
            this.albumPicturesDiv.animate({filter.width,height:filter.height},"slow",function(){
                //开启点击状态
                _self.imgLoadStatus=true;
                //隐藏掉加载等待
                _self.loading.hide();
                _self.loadPicture.css({filter.width,height:filter.height}).fadeIn();
                _self.albumPictureOfIndexDiv.width(filter.width).fadeIn();
            });
        },
        //图片加载完成状态
        preLoadImg:function(url,callBack){
            var _self=this;
            var img=new Image();
            if(!!window.ActiveXObject){
                img.onreadystatechange=function(){
                    if(this.readyState=="complete"){
                        callBack();
                    }else{
                        //开启点击状态
                        _self.imgLoadStatus=true;
                    };
                };
            }else{
                img.onload=function(){
                        callBack();
                };
                img.onerror=function(){
                        //开启点击状态
                        _self.imgLoadStatus=true;
                };
            };
            img.src=url;
        },
        //关闭相册
        closeAlbum:function(){
            this.albumOverlayDiv.fadeOut();
            this.albumLightDiv.fadeOut();    
            this.albumPictureOfIndexDiv.hide();
        },
        //获取当前点击对象在存储数组中的索引位
        getCurIndex:function(src){
            for(var i=0,num;i<this.albumArray.length;i++){
                if(this.albumArray[i].src===src){
                    num=i;
                    break;
                };
            };
            return num;
        },
        //根据点击的类别，查找页面中所有的同类别元素
        findSortList:function(sortName){
            var _self=this;
            //把点击的类别名称存储起来，下次点击如果是同类别就不就行查找
            this.sortName=sortName;
            var nodeList=this.bodyNode.find("a[data-sort="+sortName+"]");
            //添加数据到存储数组中,添加前清楚数组
            _self.albumArray.length=0;
            nodeList.each(function(i,o){
                _self.albumArray.push({
                                        src:$(o).attr("data-origin-src"),
                                        title:$(o).attr("data-title")||$(o).attr("title")||""
                                       });
            });
        },
        //构建初始代码插入BODY
        build:function(){
            //弹出层内部结构代码
            var construct=    '<div class="albumPictures">'+
                                '<span class="prevBtn"></span>'+
                                '<img class="picture" src="" />'+
                                '<em class="loading"></em>'+
                                '<span class="nextBtn"></span> '+    
                            '</div>'+
                            '<div class="albumPictureOfIndex">'+
                                '<span class="colseAlbumBtn"></span>'+
                                '<span class="pictureCaption"></span>'+
                                '<span class="pictureOfIndex"><span class="curNum">1</span><span class="of">of</span><span class="totalNum">10</span></span>'+
                            '</div>';
            //插入到this.albumLightDiv
            this.albumLightDiv.html(construct);
            //插入到body
            this.bodyNode.append(this.albumOverlayDiv,this.albumLightDiv);
        }
    };
    //注册到全局对象
    window.Album=Album;
})(jQuery);

创建：

$(function(){
    var album=new Album();
});

欢迎各位转载，支持原创，共同进步，使用中有任何疑问，请加我QQ（377746756）一起讨论。