關(guān)鍵字描述：制作 模板 頻道 圖片 " < > picture if current

phpcms圖片頻道的模板制作

前面我們已經(jīng)講過了文章、下載頻道的模板制作，今天講完圖片頻道之后，剩下的就是專題的制作，雖然每個(gè)頻道都有專題，但是制作方法都是一樣的，我們講集中講解。好，閑話不說，開始講課。

打開picture/index.html文件，我們就會(huì)發(fā)現(xiàn)都是我們前面講過很熟悉的標(biāo)簽，圖片頻道與別的頻道最大的不同，就是在顯示的時(shí)候默認(rèn)顯示的都是縮略圖，也就是我們看到的這一串標(biāo)簽

{$picpicture(0,$channelid,$cat[catid],1,0,0,10,30,0,0,0,3,1,0,130,100,5)}

因此我們主要來講這個(gè)標(biāo)簽的制作，別的頂級(jí)欄目。終極欄目的制作和文章頻道都是相同的

在picture文件夾下面以tag開頭的文件有4個(gè)
tag_picpicture.html 圖片縮略圖調(diào)用標(biāo)簽
tag_picturelist.html 圖片標(biāo)題列表調(diào)用標(biāo)簽
tag_slidepicpicture.html 圖片幻燈片調(diào)用標(biāo)簽
tag_slidepicpicture-js.html 圖片js效果標(biāo)簽?zāi)０?br />
打開tag_picpicture.html，我們會(huì)看到
{loop $pictures $i $picture}

$i是用來判斷幾列的
利用這個(gè)i來和系統(tǒng)設(shè)置的$cols 做比較
利用他們的余數(shù)來判斷是否分行

<img src='{$picture[thumb]}' alt='{$picture[alt]}' width='{$imgwidth}' height='{$imgheight}'> 這里面就是你在發(fā)布圖片時(shí)候選的 縮略圖的大小
<a href='{$picture[url]}' target='_blank' title='{$picture[alt]}'[/color]>{$picture[title]}</a>

這幾個(gè)分別是圖片的地址 圖片的提示 圖片的標(biāo)題

{if $descriptionlen}
<tr>
<td>{$picture[content]} <a href='{$picture[url]}' target='_blank'>詳細(xì)>></a></td>
</tr>
{/if}

這一句是，如果允許顯示說明，則顯示具體的說明信息


在tag_picturelist.html中，顯示的東西則比縮略圖模板要多
{$picture[img]} 標(biāo)題圖片
{$picture[catname]} 所屬欄目
<a href="{$picture[url]}" title="{$picture[alt]}" target="{$picture[target]}" class="tag_title_link{$picture[fonttype]}">{$picture[title]}</a> 圖片標(biāo)題及路徑
{if $showhits}({$picture[hits]}){/if} 如果允許顯示點(diǎn)擊數(shù)，則顯示點(diǎn)擊數(shù)
{if $showauthor}[作者:{$picture[author]}]{/if} 顯示作者
{if $datetype}[<span class="tag_date">{$picture[adddate]}</span>]{/if} 顯示添加時(shí)間
{if $descriptionlen}{$picture[content]}{/if} 顯示說明


圖片內(nèi)容頁content.html的制作
打開這個(gè)網(wǎng)頁
<script language=javascript type=text/javascript>
function fontZoom(size)
{
document.getElementById('{$addtime}l').style.fontSize=size 'px'
}
var pictureurl=new Array();
var picturename=new Array();
{loop $pictureurls $id $pic}
pictureurl[{$id}] = "{$pic[url]}";
picturename[{$id}] = "{$pic[name]}";
{/loop}
</script>

這個(gè)js函數(shù)是字體縮放函數(shù)

<!--圖片瀏覽JS開始-->
<script language=JavaScript>
<!-- Begin
var rotate_delay =4000; // delay in milliseconds (1000 = 1 secs)
current = 0;
function next() {
if(document.slideform.slide[current 1])
{
if(document.all){
document.images.show.style.filter="blendTrans(duration=2)"
關(guān)鍵字描述：制作 模板 頻道 圖片 " < > picture if current


document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.show.filters.blendTrans.Apply()
}
document.images.show.src = pictureurl[current 1];
setidval('picname',picturename[current 1]);
if(document.all){
document.images.show.filters.blendTrans.play()
}
document.slideform.slide.selectedIndex = current;
}
else
first();
}

function previous()
{
if(current-1 >= 0)
{
if(document.all){
document.images.show.style.filter="blendTrans(duration=2)"
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.show.filters.blendTrans.Apply()
}
document.images.show.src = pictureurl[current-1];
setidval('picname',picturename[current-1]);
if(document.all){
document.images.show.filters.blendTrans.play()
}

document.slideform.slide.selectedIndex = --current;
}
else
last();

}

function first()
{
current = 0;
if(document.all){
document.images.show.style.filter="blendTrans(duration=2)"
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.show.filters.blendTrans.Apply()
}
document.images.show.src = pictureurl[0];
setidval('picname',picturename[0]);
if(document.all){
document.images.show.filters.blendTrans.play()
}
document.slideform.slide.selectedIndex = 0;
}

function last() {
current = document.slideform.slide.length-1;
if(document.all){
document.images.show.style.filter="blendTrans(duration=2)"
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.show.filters.blendTrans.Apply()
}
document.images.show.src = pictureurl[current];
setidval('picname',picturename[current]);
if(document.all){
document.images.show.filters.blendTrans.play()
}
document.slideform.slide.selectedIndex = current;
}

function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}

function change() {
current = document.slideform.slide.selectedIndex;
if(document.all){
document.images.show.style.filter="blendTrans(duration=2)"
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.show.filters.blendTrans.Apply()
}
document.images.show.src = pictureurl[current];
setidval('picname',picturename[current]);
if(document.all){
document.images.show.filters.blendTrans.play()
}
}

function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current 1;
if(document.all){
document.images.show.style.filter="blendTrans(duration=2)"
關(guān)鍵字描述：制作 模板 頻道 圖片 " < > picture if current


document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.show.filters.blendTrans.Apply()
}
document.images.show.src = pictureurl[current];
setidval('picname',picturename[current]);
if(document.all){
document.images.show.filters.blendTrans.play()
}
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
function openpic()
{
window.open(pictureurl[current]);
}
// End -->
</script>

這個(gè)函數(shù)是控制js變換的函數(shù)

CODE: [Copy to clipboard] <!--主標(biāo)題--><div id="title" align="center">{$title}</div>
<!--文件屬性--><div class="par" align="center">發(fā)布日期：{$adddate}&nbsp;&nbsp;作者：<a href="{PHPCMS_PATH}member/member.php?username={$username}" class="member_url">{$author}</a>&nbsp;&nbsp;來源：<a href="{$copyfromurl}" target="_blank">{$copyfromname}</a>&nbsp;&nbsp;瀏覽次數(shù)：<span id="hits">0</span>&nbsp;&nbsp;<a href="{PHPCMS_PATH}comment/index.php?item=pictureid&itemid={$pictureid}&itemurl={$itemurl}" class="commenturl">網(wǎng)友評(píng)論<span id="commentnumber1">0</span>條</a>&nbsp;&nbsp;文字大?。骸?lt;a href="javascript :fontZoom(16)">大</a>】【<a href="javascript :fontZoom(14)">中</a>】【<a href="javascript :fontZoom(12)">小</a>】 評(píng)分等級(jí)：{$stars}</div>
<hr align="center" width="740" size="1" noshade style="color:#cccccc;" />


<div class="content_text" id="{$addtime}1"><a href="{$itemurl}">來源：{$_PHPCMS['sitename']}({$PHP_SITEURL})<br/>作者：{$username}<br/>原文：{$title}({$itemurl})</a></div>



<div class="content_text" id="{$addtime}l">{$content}</div>
{if $specialid}<div class="content_text" id="{$addtime}l">相關(guān)專題：<a href="{$special[specialurl]}" class="specialurl">{$special[specialname]}</a></div>{/if} 這一串和我們以前講文章頁面是一樣的，是一些相關(guān)的信息


從<form name=slideform >這個(gè)地方開始，就是圖片的顯示區(qū)
<span id="picname" style="font-weight:bold;font-size:14px;">{$pictureurls[0][name]}</span>
圖片名稱
<img src="{$pictureurls[0][url]}" align="center" name="show" id="picture{$id}" alt="{$pictureurls[0][name]}" border="0" style="cursor:hand;" on click="openpic()" on load="javascript :setpicWH(picture{$id},720,1000)">
圖片的具體內(nèi)容
<!--圖片名列表-->
關(guān)鍵字描述：制作 模板 頻道 圖片 " < > picture if current


<select on change="change();" name="slide">
{loop $pictureurls $id $pic}
<option value="{$id}">{$pic[name]}</option>
{/loop}
</select>

!--控制按鈕-->
<input title=Beginning on click=first(); type=button value=" |<< " class="btn">
<input title=Previous on click=previous(); type=button value=" << " class="btn">
<input title=AutoPlay on click=ap(this.value); type=button value=Start name=slidebutton class="btn">
<input title=Next on click=next(); type=button value=" >> " class="btn">
<input name="button" type=button title=End on Click=last(); value=" >>| " class="btn">

后面的東西就和文章頁面是一樣的，都是發(fā)布評(píng)論的內(nèi)容