返回列表 回复 发帖

使用highslide.js实现网站上图片点击放大功能

百度搜索highslide自行下载,解压到网站根目录。
然后修改templates/你的模版/view.htm

添加
  1. <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
  2. <script type="text/javascript" src="highslide/highslide.js"></script> <script>var lng = '{$mappoint[0]}';var lat = '{$mappoint[1]}';var address = '信息所在地';function checkcomment(){        var radios = document.getElementsByName("types");         var resualt = false;        for(i=0;i<radios.length;i++)        {                if(radios[i].checked)                {                    resualt = true;                }        }        if(!resualt)        {                   alert("请选择错误类型");                return false;        }}function chktype(){        if(document.form3.act.value=="delinfo"){                return confirm('确认要删除吗?此操作不可恢复!')        }}
  3. hs.graphicsDir = 'highslide/graphics/';  hs.align = 'center';  hs.transitions = ['expand', 'crossfade'];  hs.outlineType = 'rounded-white';  hs.wrapperClassName = 'controls-in-heading';  hs.fadeInOut = true;  //hs.dimmingOpacity = 0.75;    // Add the controlbar  if (hs.addSlideshow) hs.addSlideshow({  //slideshowGroup: 'group1',  interval: 5000,  repeat: false,  useControls: true,  fixedControls: false,  overlayOptions: {  opacity: 1,  position: 'top right',  hideOnMouseOut: false  }  });  

  4. </script>
复制代码
把phpmps原本显示图片的地方修改为:
  1. {if $images}
  2.                                 <ul class="pic_list clearfix">
  3.                                         {loop $images $val}
  4.                                          <li><a href="{$val[path]}" class="highslide"  
  5. onclick="return hs.expand(this)"><img src="{$val[path]}"  
  6. alt="{$title}" width="130px" height="90px" /> </a>  
  7. <div class="highslide-caption highslide-display-block" id="" align="right" style="overflow-x: hidden; overflow-y: hidden; z-index: 2; margin-top: 0px; visibility: visible; height: 17px">  
  8. <img src="highslide/graphics/close.png" onclick="return hs.close(this)" title="close" style="cursor:pointer;" alt="关闭"/></li>
  9.                                         {/loop}
  10.                                 </ul>
  11.                                 {/if}
复制代码
演示地址:http://www.5jjj.net/17947.html
临淄信息港 http://www.5jjj.net/
返回列表