此插件可用于相册大图展示,可使图片放大、旋转全屏展示。
定义要展示的图片
<a class="imgviewbig" href="javascript:;"><img src="userimg/1.jpg.thumb.jpg.m.jpg" class="loaderunveil" data-src="userimg/1.jpg.thumb.jpg.m.jpg" data-num="0"></a>
<a class="imgviewbig" href="javascript:;"><img src="userimg/2.jpg.thumb.jpg.m.jpg" class="loaderunveil" data-src="userimg/2.jpg.thumb.jpg.m.jpg" data-num="1"></a>
<a class="imgviewbig" href="javascript:;"><img src="userimg/3.jpg.thumb.jpg.m.jpg" class="loaderunveil" data-src="userimg/3.jpg.thumb.jpg.m.jpg" data-num="2"></a>
<a class="imgviewbig" href="javascript:;"><img src="userimg/4.jpg.thumb.jpg.m.jpg" class="loaderunveil" data-src="userimg/4.jpg.thumb.jpg.m.jpg" data-num="3"></a>
初始js函数
function startImgView(){
//弹出照片相册div
jQuery("a.imgviewbig").click(function(){
var cur = jQuery(this).children("img").attr("data-num");
var status = jQuery(this).attr("data-status");
if(status == 'comment'){
var ps = 'li';
}else{
var ps = 'div.dongtai_p_m';
}
var imgAblum = [];
jQuery(this).parents(ps).find("a.imgviewbig").each(function(i){
var data_src = jQuery(this).children("img").attr("data-src");
data_src = data_src.replace(".thumb.jpg.m.jpg","");
data_src = data_src.replace(".thumb.jpg.b.jpg","");
data_src = data_src.replace(".thumb.jpg","");
var data_src2 = data_src+'.thumb.jpg';
var data_img_href = jQuery(this).attr("data-href");
var data_img_feedid = jQuery(this).attr("data-feedid");
imgAblum[i] = [];
imgAblum[i]['desc'] = '';
imgAblum[i]['src'] = data_src;
imgAblum[i]['src2'] = data_src2;
imgAblum[i]['data_img_href'] = data_img_href;
imgAblum[i]['data_img_feedid'] = data_img_feedid;
});
imgView.init(imgAblum, cur);
});
jQuery(".imgB").hover(function(){
jQuery(".imgB .goPrev, .imgB .goNext, .imgB .bot").stop().hide().fadeIn(300);
},function(){
jQuery(".imgB .goPrev, .imgB .goNext, .imgB .bot").stop().fadeOut();
});
//切换皮肤
jQuery(".close_skin .skin_1").click(function(){
jQuery(".close_skin .skin_2").removeClass("cur");
jQuery(".close_skin .skin_3").removeClass("cur");
jQuery(".close_skin .skin_4").removeClass("cur");
jQuery(".close_skin .skin_5").removeClass("cur");
jQuery(".close_skin .skin_6").removeClass("cur");
jQuery(".close_skin .skin_7").removeClass("cur");
jQuery(".close_skin .skin_8").removeClass("cur");
jQuery(this).addClass("cur");
jQuery("#imgView_skin").attr("href", "style1/imgView.css");
jQuery("#imgViewDetail_skin").attr("href", "style1/imgViewDetail.css");
});
jQuery(".close_skin .skin_2").click(function(){
jQuery(".close_skin .skin_1").removeClass("cur");
jQuery(".close_skin .skin_3").removeClass("cur");
jQuery(".close_skin .skin_4").removeClass("cur");
jQuery(".close_skin .skin_5").removeClass("cur");
jQuery(".close_skin .skin_6").removeClass("cur");
jQuery(".close_skin .skin_7").removeClass("cur");
jQuery(".close_skin .skin_8").removeClass("cur");
jQuery(this).addClass("cur");
jQuery("#imgView_skin").attr("href", "style2/imgView.css");
jQuery("#imgViewDetail_skin").attr("href", "style2/imgViewDetail.css");
});
jQuery(".imgView_at_m h1 a").live("click", function(){
jQuery(".imgView_at").hide();
});
//关闭
jQuery(".imgView_m .close").click(function(){
jQuery(".imgView").hide();
jQuery("html, body").css("overflow", "auto");
});
}