帝国cms结合项如何排除排除筛选 帝国CMS图片轮播插件使用教程&案例

帝国CMS教程

1)显示效果:

帝国cms结合项如何排除排除筛选 帝国CMS图片轮播插件使用教程&案例 第1张

2)显示图集函数语法说明

1.格式

  1. sys_ModShowMorepic(导航小图宽度,导航小图高度,小图导航模板内容)

(其中“小图导航模板内容”参数可以不设置。)

2.使用范例

  1. <?=sys_ModShowMorepic(120,80,'')?>

3、使用范例2:(指定小图导航模板)

  1. <?php
  2. $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>';
  3. sys_ModShowMorepic(120,80,$morepicdhtemp);
  4. ?>

2)显示内容的层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.例子:显示小图导航位置

  1. <div id="ecmssmallpicsid"></div>

3)小图导航模板变量说明

1.模板制作格式:

  1. 列表头[!--empirenews.listtemp--]列表内容[!--empirenews.listtemp--]列表尾

2)变量说明:

(1)、[!--page--]:图片页码

(2)、[!--thiscss--]:当前图的CSS样式

(3)、[!--spicurl--]:小图图片地址

(4)、[!--spicwidth--]:图片宽度

(5)、[!--spicheight--]:图片高度

(6)、[!--spicno--]:当前图片编号

3.模板范例:

  1. <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>

4)CSS定义说明

1.CSS名称说明:

(1)、小图导航(当前图样式)css名称:espiccss

(2)、列表分页导航(当前分页样式)css名称:epiclpcss

(3)、大图显示css名称:eimgBox

2.使用范例:

  1. <style>
  2. /* 小图导航(当前图样式) */
  3. .espiccss{background-color:#666666;color:#ffffff;}
  4. /* 列表分页导航(当前分页样式) */
  5. .epiclpcss{font-weight:bold;}
  6. /* 大图显示 */
  7. .eimgBox{
  8. position: relative;
  9. float:left;
  10. }
  11. .eimgBox div{
  12. position:absolute;
  13. left:0px;
  14. top:0px;
  15. width:50%;
  16. height:98%;
  17. background: #fff;
  18. opacity:0.0;
  19. filter:alpha(opacity=0);
  20. }
  21. .eimgBox .eimgboxleft{
  22. cursor: pointer;
  23. }
  24. .eimgBox .eimgboxright{
  25. left:50%;
  26. cursor: pointer;
  27. }
  28. </style>