您的位置:首页> 日志> 动易系统 正文
DTOP

小桀版-图片展示效果

浅蓝色_桀 | 2011年12月08日 |

>>收藏本文 已有 4条评论

名称:小桀版-图片展示效果
版本:3.6~4.0
作者:动易设计小桀
联系方式:QQ[943068390]
不需要修改模型、制作不是很复杂的一个图片展示效果、效果也很不错的哦!支持键盘切换。
带标题简介效果:http://sddev11.atx41.idc800.net/Item/1247.aspx(有功能定制修改图片上传插件)
数据包文件清单:

1、一个图片数据拆分标签
2、一个JQ 效果JS 
3、CSS样式
4、小图标
5、图片内容页模板
注意:

1、在定义图片列表的宽的时候最好是宽度在80px以上,80px以下添加3个图片的时候有一点小小的问题,
2、在定义大图切换的CSS 样式时,两个按钮的样式 需要一个假背景图片作为引导作用,如果没有在IE下会出现一些小小的不兼容问题。

  1. <xsl:choose> 
  2.   <xsl:when test="contains($srcStr,'$$$')"> 
  3.     <li> <a> 
  4.       <xsl:attribute name="href"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/> </xsl:attribute> 
  5.       <xsl:element name="img"> 
  6.         <xsl:attribute name="src"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>_s.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/> </xsl:attribute> 
  7.         <xsl:attribute name="longdesc"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/> </xsl:attribute> 
  8.         <xsl:attribute name="title"><xsl:value-of select="substring-before(substring-before($srcStr,'$$$'),'|')"/></xsl:attribute> 
  9.         <xsl:attribute name="class">thumb_img</xsl:attribute> 
  10.       </xsl:element> 
  11.       </a> </li> 
  12.     <xsl:variable name="dstStr" select="substring-after($srcStr,'$$$')" /> 
  13.     <xsl:choose> 
  14.       <xsl:when test="contains($srcStr,'$$$')"> 
  15.         <xsl:call-template name="splitStr"> 
  16.           <xsl:with-param name="srcStr" select="$dstStr"/>           
  17.         </xsl:call-template> 
  18.       </xsl:when> 
  19.       <xsl:otherwise> 
  20.         <li> <a> 
  21.           <xsl:attribute name="href"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($srcStr,'$$$'),'|')),'.')"/> </xsl:attribute> 
  22.           <xsl:element name="img"> 
  23.             <xsl:attribute name="src"><xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($dstStr,'$$$'),'|')),'.')"/>_s.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($dstStr,'$$$'),'|')),'.')"/> </xsl:attribute> 
  24.             <xsl:attribute name="longdesc"><xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after(substring-before($dstStr,'$$$'),'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after(substring-before($dstStr,'$$$'),'|')),'.')"/> </xsl:attribute> 
  25.             <xsl:attribute name="title"><xsl:value-of select="substring-before(substring-before($dstStr,'$$$'),'|')"/></xsl:attribute> 
  26.             <xsl:attribute name="class">thumb_img</xsl:attribute> 
  27.           </xsl:element> 
  28.           </a> </li> 
  29.       </xsl:otherwise> 
  30.     </xsl:choose> 
  31.   </xsl:when> 
  32.   <xsl:otherwise> 
  33.     <li> <a> 
  34.       <xsl:attribute name="href"> <xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/> </xsl:attribute> 
  35.       <xsl:element name="img"> 
  36.         <xsl:attribute name="src"><xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/>_s.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/></xsl:attribute> 
  37.         <xsl:attribute name="longdesc"><xsl:value-of select="substring-before(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/>.<xsl:value-of select="substring-after(pe:ConvertAbsolutePath(substring-after($srcStr,'|')),'.')"/></xsl:attribute> 
  38.         <xsl:attribute name="title"><xsl:value-of select="substring-before($srcStr,'|')"/></xsl:attribute> 
  39.         <xsl:attribute name="class">thumb_img</xsl:attribute> 
  40.       </xsl:element> 
  41.       </a> </li> 
  42.   </xsl:otherwise> 
  43. </xsl:choose> 

标签说明:

1、src---------:列表图片地址

2、title--------:图片名称,这里的图片名称是用 来实现的,标签里面不输出这个则不显示;

3、alt--------:图片简介,在不修改模型的情况下只能与标签选择其中一个用来实现。

4、longdesc---:大图 查看原图功能,添加这个属性才有查看原图功能,否则无。

5、href--------:大图图片地址

 

上一组、下一组图片可以用 系统的上下一篇来实现,扩展下就可以了