<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>帝国CMS-图集显示插件</title>
<style type=text/css>
<!--
{ font-family: 宋体; font-size: 12px; line-height: 19px; color: #333333;text-decoration: none} a:hover { color: #FF0000}a:hover { text-decoration: none}a:hover { line-height: 19px}a:link { font-family: 宋体; font-size: 14px; line-height: 19px; color: #333333;text-decoration: none} a:visited { text-decoration: none; }Table{ font-family: 宋体; font-size: 13px; color: #000000; line-height: 21px; text-decoration: none } }
.box {border: 1px solid #333333;height: 10px;width: 10px;font-size:1px;cursor:hand;filter:blur(add=ture,direction=135,strength=2);}
.STYLE1 {color: #666666}
-->
</Style>
</head>
<body>
<table width="800" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#4FB4DE">
<tr>
<td height="38"><div align="center"><strong><font color="#FFFFFF" size="4">帝国CMS - 图集显示插件使用说明</font></strong></div></td>
</tr>
<tr>
<td height="30" bgcolor="#FFFFFF"> <div align="center"><a href="http://www.phome.net/OpenSource/" target="_blank"><font color="#FF0000"><strong>帝国CMS － 稳定可靠、安全省心</strong></font></a></div></td>
</tr>
<tr>
<td height="23" bgcolor="#C9F1FF"><strong>一、显示效果：</strong></td>
</tr>
<tr>
<td height="30" bgcolor="#FFFFFF"> <table width="99%" border="0" align="center" cellpadding="1" cellspacing="1">
<tr>
<td height="23"><div align="center"><img src="doc/demopic.jpg" width="600" height="600"></div></td>
</tr>
</table>
<br></td>
</tr>
<tr>
<td height="23" bgcolor="#C9F1FF"><strong>二、使用语法说明</strong></td>
</tr>
<tr>
<td height="30" bgcolor="#FFFFFF"> <table width="99%" border="0" align="center" cellpadding="1" cellspacing="1">
<tr>
<td height="25"><strong><font color="#0000FF">(一)、【显示图集函数语法说明】</font></strong></td>
</tr>
<tr>
<td height="25"><strong>1、格式：</strong></td>
</tr>
<tr>
<td height="25"><input name="textarea" type="text" style="WIDTH:100%" value="sys_ModShowMorepic(导航小图宽度,导航小图高度,小图导航模板内容)" size="60"></td>
</tr>
<tr>
<td height="25"><font color="#666666">(其中“小图导航模板内容”参数可以不设置。)</font></td>
</tr>
<tr>
<td height="25"><strong>2、使用范例1：</strong></td>
</tr>
<tr>
<td height="25"><textarea name="textarea2" cols="80" rows="2" wrap="off" style="WIDTH:100%"><?=sys_ModShowMorepic(120,80,'')?></textarea></td>
</tr>
<tr>
<td height="25"><strong>3、使用范例2：</strong>(指定小图导航模板)</td>
</tr>
<tr>
<td height="25"><textarea name="textarea3" cols="80" rows="5" wrap="off" style="WIDTH:100%"><?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);
?></textarea></td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td height="25"><strong><font color="#0000FF">(二)、【显示内容的层ID说明】</font></strong></td>
</tr>
<tr>
<td height="25"><strong>1、显示内容层ID名称列表：</strong></td>
</tr>
<tr>
<td height="25"><p> (1)、显示小图导航：ecmssmallpicsid<br>
(2)、显示下拉分页导航：ecmsselectpagesid<br>
(3)、显示列表分页导航：ecmslistpagesid</p>
<p>(4)、表单ID：eViewPicForm<br>
(5)、当前分页号：ethispage<br>
(6)、是否自动播放：autoplaystop<br>
(7)、自动播放秒数：autoplaysec<br>
(8)、大图显示：ecmsbigpicid<br>
(9)、小图显示：ecmssmallpicid<br>
(10)、图片说明：ecmspicnameid</p></td>
</tr>
<tr>
<td height="25"><strong>2、例子：</strong>显示小图导航位置 </td>
</tr>
<tr>
<td height="25">
<textarea name="textarea4" cols="80" rows="2" wrap="off" style="WIDTH:100%"><div id="ecmssmallpicsid"></div></textarea></td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td height="25"><strong><font color="#0000FF">(三)、【小图导航模板变量说明】</font></strong></td>
</tr>
<tr>
<td height="25"><strong>1、模板制作格式：</strong></td>
</tr>
<tr>
<td height="25">列表头[!--empirenews.listtemp--]列表内容[!--empirenews.listtemp--]列表尾</td>
</tr>
<tr>
<td height="25"><strong>2、变量说明：</strong></td>
</tr>
<tr>
<td height="25">(1)、[!--page--]：图片页码<br>
(2)、[!--thiscss--]：当前图的CSS样式<br>
(3)、[!--spicurl--]：小图图片地址<br>
(4)、[!--spicwidth--]：图片宽度<br>
(5)、[!--spicheight--]：图片高度<br>
(6)、[!--spicno--]：当前图片编号</td>
</tr>
<tr>
<td height="25"><strong>3、模板范例：</strong></td>
</tr>
<tr>
<td height="25"><textarea name="textarea5" cols="80" rows="2" wrap="off" style="WIDTH:100%"><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></textarea></td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td height="25"><strong><font color="#0000FF">(四)、【CSS定义说明】</font></strong></td>
</tr>
<tr>
<td height="25"><strong>1、CSS名称说明：</strong></td>
</tr>
<tr>
<td height="25">(1)、小图导航(当前图样式)css名称：espiccss</td>
</tr>
<tr>
<td height="25">(2)、列表分页导航(当前分页样式)css名称：epiclpcss</td>
</tr>
<tr>
<td height="25">(3)、大图显示css名称：eimgBox</td>
</tr>
<tr>
<td height="25"><strong>2、使用范例：</strong></td>
</tr>
<tr>
<td height="25"><textarea name="textarea6" cols="80" rows="12" wrap="off" style="WIDTH:100%"><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></textarea></td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td height="25"><strong><font color="#0000FF">(五)、【其它说明】</font></strong></td>
</tr>
<tr>
<td height="25">1、支持键盘方向键切换图片。<br>
2、点击图片左右两边切换上下张图片。</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><strong><font color="#FFFFFF">三、完整范例</font></strong></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><table width="99%" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td><strong>内容模板使用图集显示插件完整范例：</strong>可参考本目录下的“<a href="example.html" target="_blank">example.html</a>”文件html源代码。</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<hr>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td height="25">
<div align="center"><a href="http://www.phome.net" target="_blank">官方网站</a> |
<a href="http://bbs.phome.net" target="_blank">论坛交流</a> | <a href="http://www.phome.net/product/" target="_blank">产品中心</a>
| <a href="http://www.phome.net/download/" target="_blank">产品下载中心</a></div></td>
</tr>
</table>
</body>
</html>