基于jQuery的图片画廊、lightbox插件效果
浏览数：44 /
时间：2015年06月09日
图片演示:
使用说明：
第一步:首先你要在页面中引入一下文件，注意先后顺序
<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;width: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;width:100%; z-index:10000;}
.G-AlbumPopup .albumPictureOfIndex .pictureCaption,.G-AlbumPopup .albumPictureOfIndex .pictureOfIndex{display:block;}
.G-AlbumPopup .albumPictures,.G-AlbumPopup .albumPictureOfIndex{ position:relative;width: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%;width: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;width:32px;height:32px; background:url(../img/loading.gif) no-repeat center center;}
.G-AlbumPopup .albumPictureOfIndex .colseAlbumBtn{ position:absolute;right:0px;top:5px;display:block;width:27px;height:27px; background:url(../img/close.png) no-repeat center center;}
.G-AlbumPopup .albumPictures .picture{display:none;}
用到的ICON图标：
DOM结构演示：
1 <div> 2 <h1>第一组图片</h1> 3 <a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="testImages/1.jpg" data-title="这是一个可爱的小妞" href="javascript:void(0);"> 4 <img height="50" src="testImages/1-1.jpg" /></a> 5 <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> 6 <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> 7 </div> 8 9 <div> 10 <h1>第二组图片</h1> 11 <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> 12 <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> 13 <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> 14 <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> 15 </div> 16 17 <h1>第三组图片</h1> 18 <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：
1 /** 2 *图片画廊效果插件v1.0.1 3 *自由修改CSS实现自定义效果 4 *name:杨永 5 *QQ :377746756 6 */ 7 (function($){ 8 function Album(args){ 9 var _this_=this; 10 //初始化参数 11 this.setting={ 12 isShowCaption:true,//是否显示图片title 13 isShowIndex:true, //是否显示索引值 14 isShowColseBtn:true//是否显示关闭按钮 15 }; 16 //如果配置了参数，就覆盖默认参数 17 if(args){ 18 $.extend(this.setting,args); 19 }; 20 //创建蒙层#J_AlbumOverlay和相册弹出区域J_AlbumLightBox 21 this.albumOverlayDiv=$(‘<div id="J_AlbumOverlay" class="G-AlbumOverlay">‘); 22 this.albumLightDiv=$(‘<div id="J_AlbumLightBox" class="G-AlbumPopup">‘); 23 //存储body 24 this.bodyNode=$("body"); 25 //构建结构到body下 26 this.build(); 27 //所需结构创建好后,获取操作对象 28 this.albumPicturesDiv=this.albumLightDiv.find(".albumPictures"); 29 this.albumPictureOfIndexDiv=this.albumLightDiv.find(".albumPictureOfIndex"); 30 this.prevBtn=this.albumLightDiv.find(".prevBtn"); 31 this.nextBtn=this.albumLightDiv.find(".nextBtn"); 32 this.loadPicture=this.albumLightDiv.find(".picture"); 33 this.loading=this.albumLightDiv.find(".loading"); 34 this.colseAlbumBtn=this.albumLightDiv.find(".colseAlbumBtn"); 35 this.pictureCaption=this.albumLightDiv.find(".pictureCaption"); 36 this.curNum=this.albumLightDiv.find(".curNum"); 37 this.totalNum=this.albumLightDiv.find(".totalNum"); 38 //标识点击的类别名称,存储同类别的数组,当前点击对象的索引位置,防止狂点 39 this.sortName="null"; 40 this.albumArray=[]; 41 this.curIndex=0; 42 this.imgLoadStatus=true; 43 //事件委托到body 44 this.bodyNode.delegate("a[data-role=album],a.J_AlbumItem","click",function(){ 45 var sortName=$(this).attr("data-sort"), 46 title =$(this).attr("data-title"); 47 //根据点击的类别，查找页面中所有的同类别元素 48 if(_this_.sortName!=sortName){//防止在同一个类别上点击继续查找 49 _this_.findSortList(sortName); 50 //设置图片总数到节点上 51 _this_.totalNum.text(_this_.albumArray.length); 52 }; 53 //获取当前点击对象在存储数组中的索引位置 54 _this_.curIndex=_this_.getCurIndex($(this).attr("data-origin-src")); 55 //相册数组和当前点击的索引准备好后，初始化控件 56 _this_.initPopup($(this).attr("data-origin-src"),title); 57 }); 58 //绑定事件 59 this.prevBtn.hover(function(){ 60 if(!$(this).hasClass("disable")){ 61 $(this).addClass("hover"); 62 }; 63 },function(){ 64 if(!$(this).hasClass("disable")){ 65 $(this).removeClass("hover"); 66 }; 67 }).click(function(){ 68 //如果下一张图片还没有载入完毕,不让重复点击 69 if(_this_.imgLoadStatus){ 70 _this_.imgLoadStatus=false; 71 if(!$(this).hasClass("disable")){ 72 _this_.prevTo($(this)); 73 }; 74 }; 75 }); 76 this.nextBtn.hover(function(){ 77 if(!$(this).hasClass("disable")){ 78 $(this).addClass("hover"); 79 }; 80 },function(){ 81 if(!$(this).hasClass("disable")){ 82 $(this).removeClass("hover"); 83 }; 84 }).click(function(){ 85 if(_this_.imgLoadStatus){ 86 _this_.imgLoadStatus=false; 87 if(!$(this).hasClass("disable")){ 88 _this_.nextTo($(this)); 89 }; 90 }; 91 }); 92 93 this.colseAlbumBtn.click(function(){ 94 _this_.closeAlbum(); 95 }); 96 this.albumOverlayDiv.click(function(){ 97 _this_.closeAlbum(); 98 }); 99 this.albumLightDiv.click(function(){ 100 _this_.closeAlbum(); 101 }); 102 this.albumPicturesDiv.click(function(e){ 103 e.stopPropagation(); 104 }); 105 this.albumPictureOfIndexDiv.click(function(e){ 106 e.stopPropagation(); 107 }); 108 }; 109 Album.prototype={ 110 //初始化弹窗 111 initPopup:function(curUrl,title){ 112 var _self=this; 113 //根据当前索引和相册图片数设置上下切换按钮 114 if(this.curIndex==0){ 115 this.prevBtn.addClass("disable"); 116 }else{ 117 this.prevBtn.removeClass("disable"); 118 }; 119 if(this.curIndex==this.albumArray.length-1){ 120 this.nextBtn.addClass("disable"); 121 }else{ 122 this.nextBtn.removeClass("disable"); 123 }; 124 //设置title 125 this.pictureCaption.html(title); 126 /*加载图片，获取图片尺寸，滚动条位置，窗口大小开发*/ 127 this.albumLightDiv.css("top",$(document).scrollTop()+50); 128 //当弹出浮出后切换图片 129 this.loadPicture.hide(); 130 this.loading.show(); 131 this.albumOverlayDiv.fadeIn("slow",function(){ 132 _self.changeImage(curUrl); 133 }); 134 this.albumLightDiv.fadeIn(); 135 }, 136 //向上切换 137 prevTo:function(self){ 138 this.curIndex--; 139 if(this.curIndex!=this.albumArray.length-1){ 140 this.nextBtn.removeClass("disable hover"); 141 }; 142 if(this.curIndex<=0){ 143 self.addClass("disable"); 144 }; 145 this.changeImage(this.albumArray[this.curIndex].src); 146 this.pictureCaption.html(this.albumArray[this.curIndex].title); 147 }, 148 //向下切换 149 nextTo:function(self){ 150 this.curIndex++; 151 if(this.curIndex!=0){ 152 this.prevBtn.removeClass("disable hover"); 153 }; 154 if(this.curIndex>=this.albumArray.length-1){ 155 self.addClass("disable"); 156 }; 157 this.changeImage(this.albumArray[this.curIndex].src); 158 this.pictureCaption.html(this.albumArray[this.curIndex].title); 159 }, 160 //切换图片 161 changeImage:function(src){ 162 var _self=this; 163 //显示加载等待图片 164 this.loading.show(); 165 this.albumPictureOfIndexDiv.hide(); 166 this.loadPicture.css({width:"auto",height:"auto"}).hide(); 167 //等待图片加载完成 168 this.preLoadImg(src,function(){ 169 //设置当前索引和title到对应节点上 170 _self.curNum.text(_self.curIndex+1); 171 //替换图片 172 _self.loadPicture.prop("src",src); 173 //设置lightbox的尺寸 174 var width=_self.loadPicture.width(), 175 height=_self.loadPicture.height(); 176 _self.setAlbumSize(width,height); 177 }); 178 }, 179 //更具浏览器窗口大小处理下width,height 180 filterWH:function(width,height){ 181 var bili=height/width; 182 var clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, 183 clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight; 184 185 if(height<=clientHeight&&width<=clientWidth){ 186 height=height; 187 width=width; 188 }; 189 //切换时计算尺寸 190 if(height>=clientHeight){ 191 height=clientHeight-150; 192 width=height/bili; 193 }; 194 return {width:width,height:height}; 195 }, 196 //设置lightbox的尺寸 197 setAlbumSize:function(width,height){ 198 var _self=this; 199 //更具浏览器窗口大小处理下width,height 200 var filter=this.filterWH(width,height); 201 //设置图片区域和下面的文字说尺寸 202 this.albumPicturesDiv.animate({width:filter.width,height:filter.height},"slow",function(){ 203 //开启点击状态 204 _self.imgLoadStatus=true; 205 //隐藏掉加载等待 206 _self.loading.hide(); 207 _self.loadPicture.css({width:filter.width,height:filter.height}).fadeIn(); 208 _self.albumPictureOfIndexDiv.width(filter.width).fadeIn(); 209 }); 210 }, 211 //图片加载完成状态 212 preLoadImg:function(url,callBack){ 213 var _self=this; 214 var img=new Image(); 215 if(!!window.ActiveXObject){ 216 img.onreadystatechange=function(){ 217 if(this.readyState=="complete"){ 218 callBack(); 219 }else{ 220 //开启点击状态 221 _self.imgLoadStatus=true; 222 }; 223 }; 224 }else{ 225 img.onload=function(){ 226 callBack(); 227 }; 228 img.onerror=function(){ 229 //开启点击状态 230 _self.imgLoadStatus=true; 231 }; 232 }; 233 img.src=url; 234 }, 235 //关闭相册 236 closeAlbum:function(){ 237 this.albumOverlayDiv.fadeOut(); 238 this.albumLightDiv.fadeOut(); 239 this.albumPictureOfIndexDiv.hide(); 240 }, 241 //获取当前点击对象在存储数组中的索引位 242 getCurIndex:function(src){ 243 for(var i=0,num;i<this.albumArray.length;i++){ 244 if(this.albumArray[i].src===src){ 245 num=i; 246 break; 247 }; 248 }; 249 return num; 250 }, 251 //根据点击的类别，查找页面中所有的同类别元素 252 findSortList:function(sortName){ 253 var _self=this; 254 //把点击的类别名称存储起来，下次点击如果是同类别就不就行查找 255 this.sortName=sortName; 256 var nodeList=this.bodyNode.find("a[data-sort="+sortName+"]"); 257 //添加数据到存储数组中,添加前清楚数组 258 _self.albumArray.length=0; 259 nodeList.each(function(i,o){ 260 _self.albumArray.push({ 261 src:$(o).attr("data-origin-src"), 262 title:$(o).attr("data-title")||$(o).attr("title")||"" 263 }); 264 }); 265 }, 266 //构建初始代码插入BODY 267 build:function(){ 268 //弹出层内部结构代码 269 var construct= ‘<div class="albumPictures">‘+ 270 ‘<span class="prevBtn"></span>‘+ 271 ‘<img class="picture" src="" />‘+ 272 ‘<em class="loading"></em>‘+ 273 ‘<span class="nextBtn"></span> ‘+ 274 ‘</div>‘+ 275 ‘<div class="albumPictureOfIndex">‘+ 276 ‘<span class="colseAlbumBtn"></span>‘+ 277 ‘<span class="pictureCaption"></span>‘+ 278 ‘<span class="pictureOfIndex"><span class="curNum">1</span><span class="of">of</span><span class="totalNum">10</span></span>‘+ 279 ‘</div>‘; 280 //插入到this.albumLightDiv 281 this.albumLightDiv.html(construct); 282 //插入到body 283 this.bodyNode.append(this.albumOverlayDiv,this.albumLightDiv); 284 } 285 }; 286 //注册到全局对象 287 window.Album=Album; 288 })(jQuery);
创建：
$(function(){ var album=new Album(); });
欢迎各位转载，支持原创，共同进步，使用中有任何疑问，请加我QQ（377746756）一起讨论。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
