适用所有ecshop版本模板的放大镜(含小图切换大图效果)

【1】.先下载 mzp.packed.js
下载地址：/static/magiczoomplus-demo.zip 【2】.在模板中引入 mzp.packed.js 文件
有2种方式来引入
第一种方式：把mzp.packed.js 放到 ec根目录 js目录下面
这样在goods.dwt文件里面添加一行：
1.{insert_scripts files='common.js,mzp-packed.js'}
复制代码
第二种方式：把mzp.packed.js放到模板文件夹里面的js目录下
这样在goods.dwt里面添加一行：
1.<script type="text/javascript" src="js/mzp.packed.js"></script>
复制代码
如果很多朋友发现没有效果那检查下是否成功的加载了js代码
【3】在goods.dwt里面添加如下代码：我们以ecshop2.70 default模板为准其他模板依此类推
1.<!-- {if $pictures}-->
2.<a href="{$pictures.0.img_url}" id="zoom1" class="MagicZoom
MagicThumb" title="{$goods.goods_style_name}">
3. <img src="{$goods.goods_img}"
alt="{$goods.goods_name|escape:html}" width="230px;"/>
4. </a>
5. <!-- {else} -->
6. <a href="{$pictures.0.img_url}" id="zoom1"
class="MagicZoom MagicThumb" title="{$goods.goods_style_name}">
7. <img src="{$goods.goods_img}"
alt="{$goods.goods_name|escape:html}" width="230px;"/>
8. </a>
9. <!-- {/if}-->
复制代码
【4】找到库文件 goods_gallery.lbi
改为如下
1.<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
2.<!-- {if $pictures}-->
3.<div class="clearfix">
4. <span onmouseover="moveLeft()" onmousedown="clickLeft()"
onmouseup="moveLeft()" onmouseout="scrollStop()"></span>
5. <div class="gallery">
6. <div id="demo">
7. <div id="demo1" style="float:left">
8. <ul>
9. <!-- {foreach from=$pictures item=picture}-->
10. <li>
11. <a href="{$picture.img_url}"
12. rel="zoom1"
13. rev="{$picture.img_url}"
14. title="{$picture.img_desc|escape:html}">
15. <img src="{if
$picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url} {/if}" alt="{$goods.goods_name}" class="B_blue" /></a>
16.
17. </li>
18. <!--{/foreach}-->
19. </ul>
20. </div>
21. <div id="demo2" style="display:inline;
overflow:visible;"></div>
22. </div>
23. </div>
24. <span onmouseover="moveRight()" onmousedown="clickRight()"
onmouseup="moveRight()" onmouseout="scrollStop()"
class="spanR"></span>
25. <script>
26. function $(id){
27. return (document.getElementById) ?
document.getElementById(id): document.all[id]
28. }
29.
30. var boxwidth=53;//跟图片的实际尺寸相符
31.
32. var box=$("demo");
33. var obox=$("demo1");
34. var dulbox=$("demo2");
35. obox.style.width=obox.getElementsByTagName("li").length*boxw
idth+'px';
36. dulbox.style.width=obox.getElementsByTagName("li").length*bo
xwidth+'px';
37. box.style.width=obox.getElementsByTagName("li").length*boxwi
dth*3+'px';
38. var canroll = false;
39. if (obox.getElementsByTagName("li").length >= 4) {
40. canroll = true;
41. dulbox.innerHTML=obox.innerHTML;
42. }
43. var step=5;temp=1;speed=50;
44. var awidth=obox.offsetWidth;
45. var mData=0;
46. var isStop = 1;
47. var dir = 1;
48.
49. function s(){
50. if (!canroll) return;
51. if (dir) {
52. if((awidth+mData)>=0)
53. {
54. mData=mData-step;
55. }
56. else
57. {
58. mData=-step;
59. }
60. } else {
61. if(mData>=0)
62. {
63. mData=-awidth;
64. }
65. else
66. {
67. mData+=step;
68. }
69. }
70.
71. obox.style.marginLeft=mData+"px";
72.
73. if (isStop) return;
74.
75. setTimeout(s,speed)
76. }
77.。