小知识：Highslide是一个可以很容易就能实现弹出层的程序     

与lightbox最大的不同是，她可以在点击之后，继续浏览其他内容，上下拖拽滚动条，而要还原时，点击图片即可，同样，除了能显示图片，还能显示html，ajax，flash等等，效果也是不错的，用户体验感觉良好。

大家可以先浏览下下面的网站熟悉下：
http://vikjavev.no/highslide/   （官方站）
http://ylauto.vicp.net/cn/Shop/ShowClass.asp?ClassID=1  (这是应用到动易商城频道的一个例子)
 

在商品图片上点击鼠标左键，会弹出放大的层（商品），可以按住左键拖动图片，同时可以打开多个商品图片，再次单击（或按ESC件图片将回到原位）。感觉怎么样？

如何将这个特效应用到动易系统？下面跟我来一步一步做（注意红色提示）：
 

1，下载Highslide特效代码 并且解压到网站根目录，文件夹名字为Highslide

点击浏览该文件

2,在后台添加静态标签，名字为：   {$MY_ highslide337}
   优先级：1
  标签内容：

<script type="text/javascript" src="{$InstallDir} highslide/highslide.js"></script>
     
<script type="text/javascript">   
    hs.graphicsDir = '{$InstallDir}highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>

<style type="text/css">
* {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
 cursor: url({$InstallDir}highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide-active-anchor img {
 visibility: hidden;
}
.highslide img {
 border: 1px solid white;
}
.highslide:hover img {
 border: 2px solid white;
}

.highslide-wrapper {
 background: white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
   
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font- size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
 color: black;
 font-size: 8pt;
 font-family: sans-serif;
 font-weight: bold;
    text-decoration: none;
 padding: 2px;
 border: 1px solid black;
    background-color: white;
   
    padding-left: 22px;
    background-image: url ({$InstallDir}highslide/graphics/loader.white.gif);
    background- repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide -credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
 font-size: 10px;
}
a.highslide-credits:hover,
a.highslide- credits:hover i {
    color: white;
    background- color: gray;
}

a.highslide-full-expand {
 background: url({$InstallDir} highslide/graphics/fullexpand.gif) no-repeat;
 display: block;
 margin: 0 10px 10px 0;
 width: 34px;
 height: 34px;
}

/* These must always be last */
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
</style>

3,修改  PowerEasy.Product.asp  文件（注意做好备份）

   在  ElseIf FileType = "gif" Or FileType = "jpg" Or FileType = "jpeg" Or FileType = "jpe" Or FileType = "bmp" Or FileType = "png" Then  （大概在1269行下面） 这句下面
    将紧接下面这句的

strProductThumb = strProductThumb & "<img class=""pic5"" src=""" & strPicUrl & """ " 

   改为

strProductThumb = strProductThumb & "<a id=""pid"&Productid&"""  title=""点击放大""  href=""" & strPicUrl & """ class=""highslide"" onclick=""return hs.expand(this, {captionId: 'pro"&Productid&"'})""><img class=""pic5"" src=""" & strPicUrl & """ "   

保存这个文件

4，修改模板（这里提供修改商城栏目模板的方法，其他商城模板参照这个即可）

打开商城模板

在大类模板的上部加入静态标签  {$MY_highslide337}   （最好在商城所有模板头部加入这个标签，如果您的网站头部是自定义标签，直接加在网站头部的标签里即可）

在商品循环的地方找到  类似 {$ProductThumb(132,145)}（商品图片的调用）的标签下面，加入
<div class='highslide-caption' id='pro{$ProductNum}'>{$ProductName} </div>
<div>里可以根据需要增加其它标签，例如库存数量

同样

在小类模板的上部加入静态标签  {$MY_highslide337}

在商品循环的地方找到   类似{$ProductThumb(132,145)}（商品图片的调用）的标签下面，加入
<div class='highslide-caption' id='pro {$ProductNum}'>{$ProductName}</div>
<div>里可以根据需要增加其它标签，例如库存数量