ShoWT图片放大镜效果

这个不算是个插件，也不能自动安装，需要手动修改一下
只需要修改shop/template/default/store/goods.php 即可
首先引用 jquery.imagezoom.min.js
然后模版中的

1. <div id="ncs-goods-picture" class="ncs-goods-picture image_zoom"></div>

复制代码

修改为

1. <div id="ncs-goods-picture" class="ncs-goods-picture image_zoom">
2.         <div class="box">
5. <div class="tb-booth tb-pic tb-s310"  id="thumbview">
7. </div>
10. <ul class="tb-thumb" id="thumblist">
12. </ul>
13. <script type='text/javascript'>
14. var imglist;
15. <?php if (!empty($output['goods_image'])) {?>
16.                        imglist= [<?php echo implode(',', $output['goods_image']);?>];
17.                         <?php }?>
18.                                 for(var i in imglist){
19.                                         if($("#thumbview").find("img").size()<=0){
20.                                                 $("#thumbview").append('<a href="javascript:void(0);" target="_blank"></a>');
21.                                         }
22.                                         $("#thumblist").append('<li><div class="tb-pic tb-s40"><a href="javascript:void(0);"></a></div></li> ');
23.                                 }
24. $(".jqzoom").imagezoom();
26.   $("#thumblist li a").click(function () {
27.       $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
28.     $(".jqzoom").attr('src',$(this).find("img").attr("mid"));
29.     $(".jqzoom").attr('rel',$(this).find("img").attr("big"));
30.   });
32. </script>
33. </div>

复制代码

然后模版再往下找到这段代码，删除

1. jQuery(function($){
2.         //产品图片
3.         $.getScript('<?php echo BASE_STATCS_URL?>/js/ImageZoom.js', function(){
4.                 var
5.                 zoomController,
6.                 zoomControllerUl,
7.                 zoomControllerUlLeft = 0,
8.                 shell = $('#ncs-goods-picture'),
9.                 shellPanel = shell.parent(),
10.                 heightNcsDetail = $('div[class="ncs-detail"]').height();
11.                 heightOffset = 60,
12.                 minGallerySize = [360, 360],
13.                 imageZoom = new ImageZoom({
14.                         shell: shell,
15.                         basePath: '',
16.                         levelASize: [60, 60],
17.                         levelBSize: [320, 320],
18.                         gallerySize: minGallerySize,
19.                         onBeforeZoom: function(index, level){
20.                                 if(!zoomController){
21.                                         zoomController = shell.find('div.controller');
22.                                 }
24.                                 var
25.                                 self = this,
26.                                 duration = 320,
27.                                 width = minGallerySize[0],
28.                                 height = minGallerySize[1],
29.                                 zoomFx = function(){
30.                                         self.ops.gallerySize = [width, height];
31.                                         self.galleryPanel.stop().animate({width:width, height:height}, duration);
32.                                         shellPanel.stop().animate({height:height + heightOffset}, duration).css('overflow', 'visible');
33.                                         zoomController.animate({width:width-22}, duration);
34.                                         shell.stop().animate({width:width}, duration);
35.                                 };
36.                                 if(level !== this.level && this.level !== 0){
37.                                         if(this.level === 1 && level > 1){
38.                                                 height = Math.max(480, shellPanel.height());
39.                                                 width = shellPanel.width();
40.                                                 zoomFx();
41.                                         }
42.                                         else if(level === 1){
43.                                                 zoomFx();
44.                                                 shellPanel.stop().animate({height:heightNcsDetail}, duration);
45.                                         }
46.                                 }
47.                         },
48.                         onZoom: function(index, level, prevIndex){
49.                                 shell.find('a.prev,a.next')[level<3 ? 'removeClass' : 'addClass']('hide');
50.                                 shell.find('a.close').css('display', [level>1 ? 'block' : 'none']);
51.                         },
52.                         items: [
53.                         <?php if (!empty($output['goods_image'])) {?>
54.                         <?php echo implode(',', $output['goods_image']);?>
55.                         <?php }?>
56.                                         ]
57.                 });
58.                 shell.data('imageZoom', imageZoom);
59.         });
61. });

复制代码

yiyue 发表于 2015-9-18 10:34

这个是怎么弄的啊  就是按照帖子来的么

怎么解决的啊

放大镜是可以的，就不能鼠标移动发大
需要帮助找我3052221048

已经解决，谢谢！
default.rar (39.06 KB, 下载次数: 564)

2015-11-27 08:28 上传

点击文件名下载附件
js和php

我的改成鼠标经过小图区域会自动切换小图片在中图区域显示（不需要点击切换了），鼠标放到中图区域自动放大到大图区（我的中图区只有鼠标“十”字状显示，没有选块样式），大图区改成600*460大小显示效果还不错（演示的大图片是从600直接放大到1280的图片，所以不是很清晰，自己上传1280的大图超清<已经测试过>）。
就是ShoWT默认大图要1280像素，再来改吧

算了，我自己搞定了

有谁成功的，截个图我们看看

改过，替换过，还是版面错乱，图片是可以显示了，但放大镜没用了。你确定是只改这一个文件，然后放置JS文件就行？