Question

我使用1.9.1.0和自定义主题（购物者主题）

我已经复制了media.phtml和app.js等（来自rwd）以进行缩放

第一次没有加载缩放但是当我点击缩略图（更多视图）时正确加载了ElevateZoom，我发现第一个加载的产品的第二个图像

很明显，虽然我使用自定义主题我手动做两件事 1）在产品详细信息页面中，将首先加载第一张图像（基本图像） 2）并且ElevateZoom也加载了

但是我找不到用jquery改变代码的页面

Answer 1

试试看看这个文件：（/ skin / frontend / rwd / default / js / app.js）并查找image.elevateZoom（）;并检查它是否被注释，如果是这样，请删除评论并再次运行。

Answer 2

对于那些已经没有冲突设置但仍然遇到问题的人，我终于在a ticket raised on Github找到了这个解决方案

// First call elevateZoom

$j(document).ready(function() {     
  $j('.product-image-thumbs').attr('id', 'zoomGallery');

  //initiate the plugin and pass the id of the div containing gallery images 

  $j("#image-main").elevateZoom({gallery:'zoomGallery', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

 //pass the images to Fancybox 

 $j("#image-main").bind("click", function(e) { 
    var ez = $j('#image-main').data('elevateZoom');    
    $j.fancybox(ez.getGalleryList()); 
    return false; 
 }); 

// after click you need to remove the current zoom 

$j(".product-image-thumbs li img").click(function(){
    $j("#image-main").attr("src", $j(this).attr("data-main-image-src"));
    $j('.zoomContainer').remove();
    $j('#image-main').removeData('elevateZoom');

// and then call it again

$j('#image-main').elevateZoom({
    gallery: 'more-vies',
    lensSize: 200,
    cursor: 'pointer',
    galleryActiveClass: 'active',
    imageCrossfade: true,
    scrollZoom : true,
    responsive: true
  });
});
});

magento 1.9.1.0 elevateZoom未加载/第一次在自定义主题上工作

2 个答案: