帝國CMS - 圖集顯示插件使用說明
帝國CMS － 穩定可靠、安全省心
一、顯示效果：
二、使用語法說明
(一)、【顯示圖集函數語法說明】
1、格式：
(其中「小圖導航模板內容」參數可以不設置。)
2、使用範例1：
<?=sys_ModShowMorepic(120,80,'')?>
3、使用範例2：(指定小圖導航模板)
<?php $morepicdhtemp='<table><tr>[!--empirenews.listtemp--]<td bgcolor="#cccccc" align="center" id="espicid[!--page--]"[!--thiscss--]><a href="#empirecms" onclick="ecmsShowPic([!--page--]);"><img src="[!--spicurl--]" width="[!--spicwidth--]" height="[!--spicheight--]" border="0"></a><br>[!--spicno--]</td>[!--empirenews.listtemp--]</tr></table>'; sys_ModShowMorepic(120,80,$morepicdhtemp); ?>
(二)、【顯示內容的層ID說明】
1、顯示內容層ID名稱列表：
(1)、顯示小圖導航：ecmssmallpicsid (2)、顯示下拉分頁導航：ecmsselectpagesid (3)、顯示列表分頁導航：ecmslistpagesid (4)、表單ID：eViewPicForm (5)、當前分頁號：ethispage (6)、是否自動播放：autoplaystop (7)、自動播放秒數：autoplaysec (8)、大圖顯示：ecmsbigpicid (9)、小圖顯示：ecmssmallpicid (10)、圖片說明：ecmspicnameid
2、例子：顯示小圖導航位置
<div id="ecmssmallpicsid"></div>
(三)、【小圖導航模板變量說明】
1、模板製作格式：
列表頭[!--empirenews.listtemp--]列表內容[!--empirenews.listtemp--]列表尾
2、變量說明：
(1)、[!--page--]：圖片頁碼 (2)、[!--thiscss--]：當前圖的CSS樣式 (3)、[!--spicurl--]：小圖圖片地址 (4)、[!--spicwidth--]：圖片寬度 (5)、[!--spicheight--]：圖片高度 (6)、[!--spicno--]：當前圖片編號
3、模板範例：
<table><tr>[!--empirenews.listtemp--]<td bgcolor="#cccccc" align="center" id="espicid[!--page--]"[!--thiscss--]><a href="#empirecms" onclick="ecmsShowPic([!--page--]);"><img src="[!--spicurl--]" width="[!--spicwidth--]" height="[!--spicheight--]" border="0"></a><br>[!--spicno--]</td>[!--empirenews.listtemp--]</tr></table>
(四)、【CSS定義說明】
1、CSS名稱說明：
(1)、小圖導航(當前圖樣式)css名稱：espiccss
(2)、列表分頁導航(當前分頁樣式)css名稱：epiclpcss
(3)、大圖顯示css名稱：eimgBox
2、使用範例：
<style> /* 小圖導航(當前圖樣式) */ .espiccss{background-color:#666666;color:#ffffff;} /* 列表分頁導航(當前分頁樣式) */ .epiclpcss{font-weight:bold;} /* 大圖顯示 */ .eimgBox{ position: relative; float:left; } .eimgBox div{ position:absolute; left:0px; top:0px; width:50%; height:98%; background: #fff; opacity:0.0; filter:alpha(opacity=0); } .eimgBox .eimgboxleft{ cursor: pointer; } .eimgBox .eimgboxright{ left:50%; cursor: pointer; } </style>
(五)、【其它說明】
1、支持鍵盤方向鍵切換圖片。 2、點擊圖片左右兩邊切換上下張圖片。
三、完整範例
內容模板使用圖集顯示插件完整範例：可參考本目錄下的「example.html」文件html源代碼。

官方網站 | 論壇交流 | 產品中心 | 產品下載中心