一.phpcms-v9中图集详情页可以改造成如下这种风格:
二、所用到的js文件有statics/js/jquey.sgallery.js文件和statics/js/show_picture.js文件
1.statics/js/jquey.sgallery.js文件分析:
//图集详情页使用 参数1：scaling-是否自动缩放图像 参数2：width-自定义宽度 参数3：height-自定义高度 参数4：loadpic-要加载的原始图片
jQuery.fn.LoadImage=function(scaling,width,height,loadpic,call_back){
//加载中...图片
if(loadpic==null)loadpic="../images/msg_img/loading.gif";
return this.each(function(){
//t-当前要加载图片的<img src="">对象
var t=$(this);
//当前要加载图片的<img>标签的src属性值，即：原图的src属性值
var src=$(this).attr("src");
//创建一个图像对象
var img=new Image();
//将原图的src属性值赋值给新创建的img对象
img.src=src;
//自动缩放图片
var autoScaling=function(){
//scaling-是否自动缩放图像
if(scaling){
//首先要保证要加载的图像的宽度和高度都大于零
if(img.width>0 && img.height>0){
//缩放比率： 要加载图片的宽度/要加载图片的高度 > 自定义宽度 /自定义高度
if(img.width/img.height>=width/height){
//要加载图片的宽度 > 自定义宽度
if(img.width>width){
//将自定义宽度作为要加载图片的宽度，也就是要加载图片的宽度被缩小了
t.width(width);
//要加载图片的高度也做相应的处理
t.height((img.height*width)/img.width);
}else{//要加载图片的宽度 < 自定义宽度 的情况
t.width(img.width);//将要加载图片的宽度设置为自定义的宽度
t.height(img.height);//将要加载图片的高度设置为自定义的高度
}
} else{
if(img.height>height){
t.height(height);
t.width((img.width*height)/img.height);
}else{
t.width(img.width);
t.height(img.height);
}
}
}
}
//参数5：call_back-回调函数，在这里是show_picture.js中的load_images函数
//等价于load_images(t.height());
//t.height()-图片被处理后的最终高度
call_back(t.height());
}
2.statics/js/show_picture.js文件分析:
$(document).ready(function(){
//获取锚点即当前图片id
//如：会获取到index.php?m=content&c=index&a=show&catid=71&id=2#3中的#3
var picid = location.hash;
//将#截取掉，得到当前切换到的图片id：3
picid = picid.substring(1);
if(isNaN(picid) || picid=='' || picid==null) {
//如果图片id不存在，则设置为第一张图片的id
picid = 1;
}
picid = parseInt(picid);
//图集图片总数
var totalnum = $("#pictureurls li").length;
//如果当前图片id大于图片数，显示第一张图片
if(picid > totalnum || picid < 1) {
picid = 1;
next_picid = 1; //下一张图片id
} else {
//否则显示下一张图片id
next_picid = picid + 1;
}
//要加载的原图的url地址：通过dom来获取模板中当前标签的rel属性的值
url = $("#pictureurls li:nth-child("+picid+") img").attr("rel");
//图集详情页幻灯效果中间的大图，也即：要加载的图片 ，此标签是通过js动态创建的，模板文件中原本不存在
$("#big-pic").html("<img src='"+url+"' onload='loadpic("+next_picid+")' onclick='showpic(/"next/")' style='cursor:pointer;'>");
//自定义要加载图片的宽度为800、高度为650
$('#big-pic img').LoadImage(true, 800, 650,$("#load_pic").attr('rel'),load_images);
//如：1/7 - 代表这个图集中有7张图片，当前显示的是第一张图片
$("#picnum").html("<span>"+picid+"</span> / "+totalnum);
//当前图片的描述信息
$("#picinfo").html($("#pictureurls li:nth-child("+picid+") img").attr("alt"));
//大图中间的提示信息
$("#futitle").fadeIn(3000,function(){
$("#futitle").fadeOut(4000);
});
//切换到对应的图片
$("#pictureurls li").click(function(){
i = $(this).index() + 1;
showpic(i);//显示图片
});
//加载时图片滚动到中间：获取所有<li>元素的总宽度
var _w = $('.cont li').width()*$('.cont li').length;
if(picid>2) {
//移动步长
movestep = picid - 3;
} else {
movestep = 0;
}
var _ws = $('.cont li').width()*movestep;
//通过css样式来控制左移位置
$(".cont ul").css({"left":-+_ws});
//点击图片滚动
$('.cont ul').width(_w+200);
$(".cont li").click( function () {
if($(this).index()>2){
movestep = $(this).index() - 2;
$(".cont ul").css({"left":-+$('.cont li').width()*movestep});
}
});
//当前缩略图添加样式
$("#pictureurls li:nth-child("+picid+")").addClass("np");
});
//通过键盘的左右键控制图集详情页的幻灯片切换
$(document).keyup(function(e) {
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
switch(currKey) {
case 37: // left：切换到上一张图片
showpic('pre');
break;
case 39: // up：切换到下一张图片
showpic('next');
break;
case 13: // enter：切换图集
var nextpicurl = $('#next_thumb').attr('href');//获取下一个图集的url地址
if(nextpicurl !== '' || nextpicurl !== 'null') {
window.location=nextpicurl;//直接跳转到下一图集
}
break;
}
});
//图集详情页会使用到此函数：设置要加载图片的高度
function load_images(height) {
var _h = $("#big-pic img").css("height");
$(".tjxx_img").height(_h);
}
//type : next-下一张 pre-上一张 replay：是否重播
function showpic(type, replay) {
//隐藏重复播放div
//$("#endSelect").hide();
//图集图片总数
var totalnum = $("#pictureurls li").length;
if(type=='next' || type=='pre') {
//获取锚点即当前图片id
//如：会获取到index.php?m=content&c=index&a=show&catid=71&id=2#3中的#3
var picid = location.hash;//#3
picid = picid.substring(1);//3
if(isNaN(picid) || picid=='' || picid==null) {
picid = 1;
}
//当前图片id
picid = parseInt(picid);
//下一张
if(type=='next') {
i = picid + 1;//当前图片id加1
//如果是最后一张图片，指针指向第一张
if(i > totalnum) {
//如果当前是最后一张图片，提示最后一页
var next_url = $("#next_thumb").attr('href');
if(next_url!=''){
window.location.href = next_url;//提示最后一张
return false;
}
i=1;//如果是最后一张图片，指针指向第一张
next_picid=1;//下一张图片id重置为1
//重新播放
if(replay!=1) {
return false;
}
} else {
//下一张图片id
next_picid = parseInt(i) + 1;
}
} else if (type=='pre') {
i = picid - 1;//当前图片id减1
//如果是第一张图片，指针指向最后一张
if(i < 1) {
i=totalnum;//如果是第一张图片，指针指向最后一张
next_picid = totalnum;
} else {
next_picid = parseInt(i) - 1;
}
}
//当前选中的图片的url
url = $("#pictureurls li:nth-child("+i+") img").attr("rel");
//图集详情页幻灯效果中间的大图，也即：要加载的图片 ，此标签是通过js动态创建的，模板文件中原本不存在
$("#big-pic").html("<img src='"+url+"' onload='loadpic("+next_picid+")' onclick='showpic(/"next/")' style='cursor:pointer;'>");
//自定义要加载图片的宽度为800、高度为650
$('#big-pic img').LoadImage(true, 800, 650,$("#load_pic").attr('rel'),load_images);
$("#picnum").html("<span>"+i+"</span> / "+totalnum);
$("#picinfo").html($("#pictureurls li:nth-child("+i+") img").attr("alt"));
//更新锚点
location.hash = i;
type = i;
//点击图片滚动
var _w = $('.cont li').width()*$('.cont li').length+200;
if(i>2) {
movestep = i - 3;
} else {
movestep = 0;
}
var _ws = $('.cont li').width()*movestep;
$(".cont ul").css({"left":-+_ws});
} else if(type=='big') {//查看原图
//获取锚点即当前图片id
var picid = location.hash;
picid = picid.substring(1);
if(isNaN(picid) || picid=='' || picid==null) {
picid = 1;
}
picid = parseInt(picid);
url = $("#pictureurls li:nth-child("+picid+") img").attr("rel");
window.open(url);
} else {//type：数字类型
url = $("#pictureurls li:nth-child("+type+") img").attr("rel");
$("#big-pic").html("<img src='"+url+"' onclick='showpic(/"next/")' style='cursor:pointer;'>");
//自定义要加载图片的宽度为800、高度为650
$('#big-pic img').LoadImage(true, 800, 650,$("#load_pic").attr('rel'),load_images);
//如：1/7 - 代表这个图集中有7张图片，当前显示的是第一张图片
$("#picnum").html("<span>"+type+"</span> / "+totalnum);
//当前图片的描述信息
$("#picinfo").html($("#pictureurls li:nth-child("+type+") img").attr("alt"));
location.hash = type;
}
$("#pictureurls li").each(function(i){
j = i+1;
if(j==type) {//当前选中的图片添加样式
$("#pictureurls li:nth-child("+j+")").addClass("np");
} else {
$("#pictureurls li:nth-child("+j+")").removeClass();
} //Cuoxin.com
});
}
//预加载图片
function loadpic(id) {
url = $("#pictureurls li:nth-child("+id+") img").attr("rel");
$("#load_pic").html("<img src='"+url+"'>");
}
由 dawei
【声明】：毕节站长网内容转载自互联网，其相关言论仅代表作者个人观点绝非权威，不代表本站立场。如您发现内容存在版权问题，请提交相关链接至邮箱：bqsm@foxmail.com，我们将及时予以处理。