实用的图片放大效果

1.下载JS包: /Files/Simcoder/jsFile.rar 

2.将文件解压放到项目（webUI）根目录

3.引用jsFile文件夹中的JS和CSS，请复制一下内容，不能完全引用CSS和JS否则运行项目会报错（effects.js等不用引用）：

代码

     < script type = " text/javascript "  src = " ../jsFile/prototype.js " ></ script >
     < script type = " text/javascript "  src = " ../jsFile/scriptaculous.js?load=effects,builder " >

    </ script >
     < script type = " text/javascript " language = " javascript "  src = " ../jsFile/lightbox.js " ></ script >
     < link rel = " stylesheet "  href = " ../jsFile/lightbox.css "  type = " text/css "  media = " screen "   />

 

4.修改JS和CSS中的路径：

（1.）打开lightbox.js文件 修改正确路径

var fileLoadingImage  =   " ../jsFile/loading.gif " ;        
var fileBottomNavCloseImage  =   " ../jsFile/closelabel.gif " ;

 

（2.）打开lightbox.css文件 修改正确路径

#prevLink:hover, #prevLink:visited:hover  {  background :  url('loading.gif') left 15% no-repeat ;   }
#nextLink:hover, #nextLink:visited:hover  {  background :  url('nextlabel.gif') right 15% no-repeat ;   }

 

上面所下载的文件均已改正，可直接引用，在图片处添加如下代码：

代码

  < asp:Repeater ID = " RepeaterImage "  runat = " server " >
                     < ItemTemplate >
                         < div style = " float:left; margin-left:35px; padding-bottom:20px; " >
                              < a href = ' ../Admin/images/ShopMien/<%# Eval("imageName") %> '  rel = " lightbox[roadtrip] "  target = " _blank "  title = ".. "   >
                                  < img alt = ' <%# Eval("imageName") %> '  src = ' ../Admin/images/ShopMien/<%# Eval("imageName") %> '  width = " 180px "  height = " 130px "  borderwidth = " 2px "  bordercolor = " #7F1B90 "   />
                              </ a >
                         </ div >                   
                     </ ItemTemplate >
                 </ asp:Repeater >

 

关键代码：

  < a href = ' ../Admin/images/ShopMien/<%# Eval("imageName") %> '  rel = " lightbox[roadtrip] "  target = " _blank "  title = " .. "   >

 

href中的连接要和图片src中的连接一致，rel="lightbox[roadtrip]" target="_blank" 复制过来就可以了！

效果图如下：

 

转载于:https://www.cnblogs.com/Simcoder/archive/2010/07/08/1770178.html