帝国CMS图集显示插件使用说明

本文目录

• 一、显示效果
• 二、使用语法说明
• (四)、【CSS定义说明】
• (五)、【其它说明】

一、显示效果

二、使用语法说明

(一)、【显示图集函数语法说明】

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、点击图片左右两边切换上下张图片。