咨询热线：18076568990、0755-25823180
»服务支持 › 产品动态 › 插件发布 › ShoWT图片放大镜效果

[求助] ShoWT图片放大镜效果

3812 16 hahawfg 发表于 2015-8-15 11:23:46
这个不算是个插件，也不能自动安装，需要手动修改一下
只需要修改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. });
复制代码

评分

参与人数 1金钱 +20 收起 理由
shopwt + 20 很给力! 但这个当图片尺寸少于360px 的时候.

查看全部评分

回复

使用道具 举报

jim1010 发表于 2015-10-28 15:51:55
yiyue 发表于 2015-9-18 10:34

这个是怎么弄的啊  就是按照帖子来的么
回复 支持 反对

使用道具 举报

ff1015 发表于 2015-10-24 10:27:07
怎么解决的啊
回复 支持 反对

使用道具 举报

3052221048 发表于 2015-10-15 10:37:26
放大镜是可以的，就不能鼠标移动发大
需要帮助找我3052221048
回复 支持 反对

使用道具 举报

35on.cn 发表于 2015-10-9 17:12:28
本帖最后由 35on.cn 于 2015-11-27 08:29 编辑

已经解决，谢谢！
QQ截图20151009171242.jpg default.rar (39.06 KB, 下载次数: 564)
回复 支持 反对

使用道具 举报

ii8680 发表于 2015-9-24 10:46:35
本帖最后由 ii8680 于 2015-9-24 10:51 编辑

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

使用道具 举报

ii8680 发表于 2015-9-24 10:36:59
本帖最后由 ii8680 于 2015-9-24 10:39 编辑

算了，我自己搞定了
无标题.jpg


无标题1.jpg
回复 支持 反对

使用道具 举报

yiyue 发表于 2015-9-18 10:34:22
未命名 1.jpg
回复 支持 反对

使用道具 举报

ii8680 发表于 2015-9-12 16:40:03
有谁成功的，截个图我们看看
回复 支持 反对

使用道具 举报

ii8680 发表于 2015-9-11 12:00:17
改过，替换过，还是版面错乱，图片是可以显示了，但放大镜没用了。你确定是只改这一个文件，然后放置JS文件就行？
回复 支持 反对

使用道具 举报

下一页 »
12下一页
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

插件发布

收藏本版 (1) 订阅
  • 今日
    0
  • 主题
    174
发布主题

推荐贴子

精选帖子

10
年
电商框架开发经验
100
个以上
成功项目落地
5
x8小时
售后支持
500
次以上
代码文档更新
关于我们
公司简介 渠道合作 电商资讯
联系我们

产品及方案咨询：18076568990、0755-25823180

电子邮箱：web@shopwt.com、客服微信：shopwtcom

公司地址：深圳市罗湖区人民南路3002号国贸大厦B座1608楼

  • 官方公众号

  • 微信客服

    • 友情链接：ShopWT官方|DJ久久网|ShopWT演示|好商城| 社区交流

    版权所有 2008-2022 @ 深圳市米讯达信息技术有限公司 桂ICP备16002005号-3