图片演示:
使用说明：
第一步:首先你要在页面中引入一下文件，注意先后顺序
<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）一起讨论。
时间： 2024-11-05 18:51:49