怎么用放大镜 实现多图放大

2016-07-07 16:10 来源：www.chinab4c.com 作者：ecshop专家

good.dwt的部分代码 如下

  2. <a href="{$pictures.0.original_img}" title="{$goods.goods_name|escape:html}" class="MagicZoom" id="MagicZoom" rel="zoom-width: 400px;">
  3. <img src="{$pictures.0.img_url}" alt="{$goods.goods_name|escape:html}" width="300" border="0" name="showimg" id="showimg" />
  4. </a>
复制代码


goods_gallery.lbi 的部分代码如下


  2. <div class="clearfix">
  3. <span onmouseover="moveLeft()" onmousedown="clickLeft()" onmouseup="moveLeft()" onmouseout="scrollStop()" style="cursor:hand"></span>
  4. <div class="gallery">
  5. <div id="demo">
  6. <div id="demo1" style="float:left">
  7. <ul>
  8. <!-- {foreach from=$pictures item=picture}-->
  9. <li><a href="gallery.php?id={$id}&amp;img={$picture.img_id}"target="_blank" onMouseOver="changepic('{$picture.img_url}','{$picture.original_img}')"><img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}"alt="{$goods.goods_name}" class="B_blue" /></a>
  10. </li>
  11. <!--{/foreach}-->
  12. </ul>
  13. </div>
  14. <div id="demo2" style="display:inline; overflow:visible;"></div>
  15. </div>
  16. </div>
  17. <span onmouseover="moveRight()" onmousedown="clickRight()" onmouseup="moveRight()" onmouseout="scrollStop()" class="spanR" style="cursor:hand"></span>

  19. <script>
  20. function changepic(simg,bimg){
  21. $("MagicZoom").setAttribute('href',bimg);
  22. $("showimg").src=simg;
  23. }
  24. </script>
复制代码


我发现单纯改变 good.dwt 中的 <a href="{$pictures.0.original_img}" title="{$goods.goods_name|escape:html}" class="MagicZoom" id="MagicZoom" rel="zoom-width: 400px;"> href是不行的，还得从新调用放大镜里的js 函数。研究了半天的js代码，如果重新调用放大镜里的js MagicZoom_findZooms() 函数，放大镜里的大图可以改变可是，可是小图会出现重影。放大镜里的js 还有个和 MagicZoom_findZooms() 对于的函数MagicZoom_stopZooms()，本来因为可以消除重影可惜没有效果。
还是没有实现多图放大镜的功能。

小图重影.jpg (8.63 KB)

小图重影.jpg


回答：
坐个沙发慢慢学！

看官方的例子

goods_gallery.lbi 的代码做如下修改，把<table>内容换成以下的内容就可以了。

<table><tr>
<!-- {foreach from=$pictures item=picture}-->
<td><div>
<A href="{$picture.img_original}" rel="zoom1" rev="{$picture.img_url}" title="Black dress"><img src="{$picture.img_url}"/></A>
</div></td>
<!--{/foreach}-->
</tr></table>