(一)、【显示图集函数语法说明】 |
1、格式： |
|
(其中“小图导航模板内容”参数可以不设置。) |
2、使用范例1： |
<?=sys_ModShowMorepic(120,80,'')?> |
3、使用范例2：(指定小图导航模板) |
<?php<br>$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>';<br>sys_ModShowMorepic(120,80,$morepicdhtemp);<br>?> |
|
(二)、【显示内容的层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><br><br>/* 小图导航(当前图样式) */<br>.espiccss{background-color:#666666;color:#ffffff;}<br><br>/* 列表分页导航(当前分页样式) */<br>.epiclpcss{font-weight:bold;}<br><br>/* 大图显示 */<br>.eimgBox{<br> position: relative;<br> float:left;<br>}<br>.eimgBox div{<br> position:absolute;<br> left:0px;<br> top:0px;<br> width:50%;<br> height:98%;<br> background: #fff;<br> opacity:0.0;<br> filter:alpha(opacity=0);<br>}<br>.eimgBox .eimgboxleft{<br> cursor: pointer;<br>}<br>.eimgBox .eimgboxright{<br> left:50%;<br> cursor: pointer;<br>}<br><br></style> |
|
(五)、【其它说明】 |
1、支持键盘方向键切换图片。
2、点击图片左右两边切换上下张图片。 |
|
urbanu619
3e2d8679fc
模板
