[分享]分享个YOKA网的图片集模板
演示见 http://www.yoka.com/fashion/edittj/2009/pic113040165.shtml?cando=1
CSS文件稍稍改了下，见附件
图片内容页代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>[!--pagetitle--]_[!--class.name--]_[!--bclass.name--]_都市生活网</title>
<meta name="keywords" content="[!--pagekey--]" />
<meta name="description" content="[!--pagedes--]" />
<link rel="stylesheet" href="[!--news.url--]skin/yoka/images/index10.css" type="text/css" />
<script src="http://images.yoka.com/pic/div/js/yoka.js"></script>
</head><body>
<div class="centess">
<script>
document.write('<script src="[!--news.url--]e/member/login/loginjs.php?t='+Math.random()+'"><'+'/script>');
</script>
<style>
.logo{height:104px;background:#0c1b30 url(http://images.yoka.com/pic/deco/2009/0318/a3.jpg);border-bottom:#2e2e36 1px solid;overflow:hidden;}
.logo dt{padding:24px 0px 0px 21px;float:left;}
.logo dd{float:right;padding:10px 9px 0px 0px;}
/*-- YG edit 2009-09-21 start--*/
.autobut {bottom:188px;height:31px;position:absolute;right:20px;width:92px;}
.hy_new_list{width:230px; height:65px; border:#2F2F2F solid 1px;bottom:8px;position:absolute;right:55px;}
.pic .hy_new_list li{background:url(http://images.yoka.com/pic/div/2009/ygtm/ygjj.jpg) no-repeat 4px 5px;padding-left:15px; width:211px;overflow:hidden;white-space:nowrap; height:20px;}
.pic .hy_new_list ul li a{color:#2F2F2F;}
.picimgb{height:550px;overflow:hidden;min-height:550px;_height:550px;}
/*-- YG edit 2009-09-21 end--*/
.hy_new_list ul{padding-top:7px;}
</style>
<dl class="logo"><dt><a href="/"><img src="http://images.yoka.com/pic/news/2009/0602/logo.gif" /></a></dt><dd>
<div align="center">
<!-- AdSame ShowCode: 5IDS.COM / 图片库 / 图库内容页顶部右侧旗帜 Begin -->
<!-- AdSame ShowCode: 5IDS.COM / 图片库 / 图库内容页顶部右侧旗帜 End -->
</div>
</dd></dl>
<!-- 导航 begin -->
<dl class="picnav"><dt>[!--newsnav--]</dt>
<dd><a href="[!--news.url--]photo/meinv" target=_blank>缤纷美女</a> | <a href="[!--news.url--]photo/dapei" target=_blank>摩登搭配</a> | <a href="[!--news.url--]photo/life" target=_blank>品质生活</a> | <a href="[!--news.url--]photo/road" target=_blank>潮流街拍</a> | <a href="[!--news.url--]photo/shehua" target=_blank>奢华经典</a> | <a href="[!--news.url--]photo/stars" target=_blank>明星娱乐</a></dd>
<dd></dd>
</dl>
<!-- 导航 end -->
<!-- 标题 begin -->
<dl class="hnav jd"><dt>[!--title--] <i><a href="[!--news.url--]photo/" target=_blank></a></i></dt><dd><i>下一篇：[!--info.next--]</i></dd></dl>
<!-- 标题 end -->
[eshowphoto]11,0,0[/eshowphoto]
<!--尾部开始===========================================-->
[!--temp.footer--]
===============华丽的分割线===============
图片集标签模板，页面模板内容(*)：
<!-- 图片区 begin -->
<style>
#imgBox{text-align:center;}
#photolist .list{float:center;height:70px;}
</style>
<div class="pic">
<div class="picimg">
<div class="picimgb">
<table width="100%" height="550" border="0" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="middle">
<div id="imgBox"></div>
</td></tr></table></div></div>
<div class="pictxt">
<p>[!--picsay--]</p>
</div>
<div class="buta"><a href="javascript:;" id="prev_pic"></a></div>
<div class="butb"><a href="javascript:;" id="next_pic"></a></div>
<div class="autobut"><a href="javascript:SlidePlay();" id="play_pic"><img src="/Skin/Tags/img2/photo_play.gif" id="SlideButton" align="absmiddle" /></a>
<input id="interval" type="hidden" value="5" name="interval"></div>
</div>
<div class="picrun">
<div class="picrunlist"><a href="javascript:;" id="show_pic" title='点击查看原图' target="_blank"></a></div>
<div class="butlf"><a href="javascript:;" id="prev_page" title='上一组'></a></div>
<div id="gd" class="uxvees"><div>
<ul class="list" id="PhotoUrlList" title='点击查看大图'</ul>
</div></div>
<div class="butrg"><a href="javascript:;" id="next_page" title='下一组'></a></div>
</div>
<!--自定义-->
<script type="text/javascript">
var Bof=1;
var iplay=1;
var IsPlaying=false;
var PhotoIndex=1;
var arrUrlName=new Array();
var arrUrl=new Array();
var idomain="/";
[!--UrlName--]
[!--pictitleabout--]
ViewPhoto('<!--list.var1-->',2);
ShowUrlList(Bof);
function changePic(id){
var j = parseInt(id.options[id.selectedIndex].value);
ViewPhoto(arrUrl[j],j+2);
}
function ViewPhoto(PhotoUrl,num){
var strHtml;
var FileExt=PhotoUrl.substr(PhotoUrl.lastIndexOf('.')+1).toLowerCase();
if(FileExt=='gif'||FileExt=='jpg'||FileExt=='png'||FileExt=='bmp'||FileExt=='jpeg'){
strHtml="<a href='javascript:nextpic("+num+");' title='点击查看下一张'><img src='"+PhotoUrl+"' onload='if(this.width>500) this.width=500'></a>";
document.getElementById('show_pic').href="/e/ViewImg/index.html?url="+PhotoUrl+"";
document.getElementById('prev_pic').href="javascript:nextpic("+(num-2)+");";
document.getElementById('next_pic').href="javascript:nextpic("+num+");";
}else if(FileExt=='swf'){
strHtml="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='550' height='400' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0'><param name='movie' value='"+PhotoUrl+"'><param name='quality' value='high'><embed src='"+PhotoUrl+"' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width='550' height='400'></embed></object>";
document.getElementById('show_pic').href=PhotoUrl;
document.getElementById('prev_pic').href="javascript:nextpic("+(num-2)+");";
document.getElementById('next_pic').href="javascript:nextpic("+num+");";
}else{
strHtml=PhotoUrl;
}
var inum = num-1;
iplay=num;
if(inum<=5){
ShowUrlList(1);
}else if(inum<=10){
ShowUrlList(2);
}else if(inum<=15){
ShowUrlList(3);
}else if(inum<=20){
ShowUrlList(4);
}
document.getElementById('imgBox').innerHTML=strHtml;
}
function SlidePlay(){
var sTimer,url;
if(IsPlaying==false){
IsPlaying=true;
document.getElementById('SlideButton').src=idomain+'Skin/Tags/img2/photo_play1.gif';
sTimer=setTimeout("ViewNext("+(iplay+1)+")",2000);
}else{
clearTimeout(sTimer);
IsPlaying=false;
document.getElementById('SlideButton').src=idomain+'Skin/Tags/img2/photo_play.gif';
}
}
function ViewNext(i){
if(IsPlaying==false){return false;}
if(PhotoIndex<arrUrl.length){
ViewPhoto(arrUrl[PhotoIndex],i);
PhotoIndex+=1;
iplay+=1
}
if(PhotoIndex>=arrUrl.length){
PhotoIndex=0;
iplay=2;
}
var iTimeout=parseInt(document.getElementById('interval').value * 1000);
if (isNaN(iTimeout)){
iTimeout = 3000;
}
if(iTimeout<1000){iTimeout=5000;}
sTimer=setTimeout("ViewNext("+iplay+")",iTimeout);
$("photo_select").selectedIndex = i-2;
}
function nextpic(ix){
var num = ix-1;
for(var i=0;i<arrUrl.length;i++){
if(num==i) ViewPhoto(arrUrl[i],(i+2));
} //13 14
if(num<arrUrl.length&&num>0)$("photo_select").selectedIndex = num;
}
function ShowUrlList(page){
if(arrUrl.length<=1) return '';
var dTotalPage=arrUrl.length/5;
var TotalPage;
var MaxPerPage=5;
var changePage=false;
if(arrUrl.length%MaxPerPage==0){TotalPage=Math.floor(dTotalPage);}else{TotalPage=Math.floor(dTotalPage)+1;}
if(page<1) page=1;
if(page>TotalPage) page=TotalPage;
var strPage="";
for(var i=(page-1)*MaxPerPage;i<arrUrl.length&&i<page*MaxPerPage;i++){
//if(!changePage){
// strPage+="<dl><dd><i><table width='100%' height='64' cellpadding='0' cellspacing='0' ><tr><td align='center' valign='middle'><a href='javascript:();' onclick=ViewPhoto('"+arrUrl[i]+"','"+(i+2)+"')><img src='"+arrUrl[i]+"' border='0' height='75' /></a></td></tr></table></i></dd></dl>";
// ViewPhoto(arrUrl[i],i+2);
// changePage=true;
//}else{
strPage+="<dl><dd><i><table width='100%' height='64' cellpadding='0' cellspacing='0' ><tr><td align='center' valign='middle'><a href='javascript:();' onclick=ViewPhoto('"+arrUrl[i]+"','"+(i+2)+"')><img src='"+arrUrl[i]+"' border='0' height='75' /></a></td></tr></table></i></dd></dl>";
//}
}
document.getElementById("prev_page").href="javascript:ShowUrlList("+(page-1)+")";
document.getElementById("next_page").href="javascript:ShowUrlList("+(page+1)+")";
document.getElementById("PhotoUrlList").innerHTML=strPage;
}
</script>
<!-- 滚动区 end -->
</div>
列表内容模板(list.var) (*)：
[!--picurl--]
===============华丽的分割线===============
特别感谢：gdccna 以下内容为gdccna 提供：
1.修改\e\class\t_functions.php 添加以下红色代码
//图库模型分页标签
function sys_PhotoMorepage($tempid,$spicwidth=0,$spicheight=0){
global $navinfor;
$morepic=$navinfor['morepic'];
if(empty($morepic))
{
return "";
}
//取得标签
$tempr=sys_ReturnBqTemp($tempid);
if(empty($tempr['tempid']))
{return "";}
$rexp="\r\n";
$fexp="::::::";
$gs="";
if($spicwidth)
{$gs=" width='".$spicwidth."'";}
if($spicheight)
{$gs.=" height='".$spicheight."'";}
$rstr="";
$sdh="";
$firstpic="";
$optionstr="";
$titleoption="";
$listpage="";
$nbsp="";
$rr=explode($rexp,$morepic);
$count=count($rr);
//自加
$pictitleabout="";
$rstrb="";
//
for($i=0;$i<$count;$i++)
{
$j=$i+1;
$fr=explode($fexp,$rr[$i]);
$smallpic=$fr[0]; //小图
$bigpic=$fr[1]; //大图
if(empty($bigpic))
{
$bigpic=$smallpic;
}
$picname=htmlspecialchars($fr[2]); //名称
$showpic=ReplaceMorePagelistvar($tempr['listvar'],$picname,$bigpic);
$sdh.=$nbsp."<a href='#ecms' onclick='GotoPhPage(".$j.");' title='".$picname."'><img src='".$smallpic."' alt='".$picname."' border=0".$gs."></a>";
if($i==0)
{
$firstpic=$showpic;
}
$rstr.="photosr[".$j."]=\"".addslashes($showpic)."\";
";
$optionstr.="<option value=".$j.">第 ".$j." 页</option>";
$titleoption.="<option value=".$j.">".$j."、".$picname."</option>";
$listpage.=$nbsp."<a href='#ecms' onclick='GotoPhPage(".$j.");' title='".$picname."'>".$j."</a>";
$nbsp=" ";
//自加
$pictitleabout.="arrUrlName[".$i."]=\"".addslashes($picname)."\";";
$rstrb.="arrUrl[".$i."]=\"".addslashes($showpic)."\";";
//
}
echo ReplaceMorePagetemp($tempr['temptext'],$rstr,$sdh,$optionstr,$titleoption,$firstpic,$listpage,$pictitleabout,$rstrb);
}
//替换图片集分页模板
function ReplaceMorePagetemp($temp,$rstr,$sdh,$select,$titleselect,$showpic,$listpage,$pictitleabout,$rstrb){
$temp=str_replace("[!--photor--]",$rstr,$temp);
$temp=str_replace("[!--smalldh--]",$sdh,$temp);
$temp=str_replace("[!--select--]",$select,$temp);
$temp=str_replace("[!--titleselect--]",$titleselect,$temp);
$temp=str_replace("[!--listpage--]",$listpage,$temp);
$temp=str_replace("<!--list.var1-->",$showpic,$temp);
//自加
$temp=str_replace("[!--pictitleabout--]",$pictitleabout,$temp);
$temp=str_replace("[!--UrlName--]",$rstrb,$temp);
//
return $temp;
}
上传以下附件：
[下载 *.rar](文件大小：2.57 KB,下载次数：490)
|
[该贴被修改 4 次，最后修改时间 2009-12-13 14:06:19 ]
都市夜归人，我们的故事。
http://www.ydzwas.cn
|
顶部 
加入收藏夹
2009-12-13 14:02:02 
已设置保密
回复
引用
报告
编辑
删除
不错，支持下