首页 > 代码库 > 基于jQuery的图片画廊、lightbox插件效果
基于jQuery的图片画廊、lightbox插件效果
图片演示:
使用说明：
第一步:首先你要在页面中引入一下文件，注意先后顺序
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/album-lightbox.css" /><script type="text/javascript" src="http://www.mamicode.com/js/jquery.js"></script><script type="text/javascript" src="http://www.mamicode.com/js/album.js"></script>
第二部
<div><h1>第一组图片</h1><a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="http://www.mamicode.com/testImages/1.jpg" data-title="这是一个可爱的小妞" href="javascript:void(0);"><img height="50" src="http://www.mamicode.com/testImages/1-1.jpg" /></a><a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="http://www.mamicode.com/testImages/2.jpg" data-title="你知道这个车是多前嘛" href="javascript:void(0);"><img height="50" src="http://www.mamicode.com/testImages/2-1.jpg" /></a><a class="J_AlbumItem" data-role="album" data-sort="example-2" data-origin-src="http://www.mamicode.com/testImages/3.jpg" data-title="再多的冯绍峰的身份哇塞的的粉色外电风扇" href="javascript:void(0);"><img height="50" src="http://www.mamicode.com/testImages/3-1.jpg" /></a></div>
看下以上页面渲染结构，一组图片就是多个“<a data-origin-src="http://www.mamicode.com/这是源图地址"><img src="http://www.mamicode.com/这是页面中小的预览图"></a>”这样结构的组合。
下面介绍下参数设置：
data-role="album"--->这个是必须存在且参数名是固定的，用来查找它是否用来渲染相册功能 data-sort="example-2"--->这个表示一组图片的组名，如果好几张图片属于同一组，那么这几张图片的参数值就是相同的 data-origin-src="http://www.mamicode.com/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 //设置title125 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,height180 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,height200 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=http://www.mamicode.com/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=http://www.mamicode.com/==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 //构建初始代码插入BODY267 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.albumLightDiv281 this.albumLightDiv.html(construct);282 //插入到body283 this.bodyNode.append(this.albumOverlayDiv,this.albumLightDiv);284 }285 };286 //注册到全局对象287 window.Album=Album;288 })(jQuery);
创建：
$(function(){ var album=new Album();});
欢迎各位转载，支持原创，共同进步，使用中有任何疑问，请加我QQ（377746756）一起讨论。
基于jQuery的图片画廊、lightbox插件效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。