Question

我正在尝试在Spree电子商务商店上实施提升缩放。到目前为止，缩放对主图像起作用，但是当产品有多个图像时，我无法使缩放采用所选缩略图。我已经在他们的页面上尝试了他们的示例，但他们使用的画廊非常简单，我的缩略图有点不同，因为它们在旋转木马内。

这是我的产品show.html.erb中的代码

<div id="main-image" class="mainImage">

<% image = @product.images.first  %>
<%= image_tag(image.attachment.url(:product), id: "zoom_08", class: "img-responsive", 'data-zoom-image' => image.attachment.url(:large)) %>

</div>

并在文件的末尾我有javascript

<script type="text/javascript">

 $("#zoom_08").elevateZoom({
     //gallery:'product-thumbnails',
     //galleryActiveClass: 'active',
     zoomType: "inner",
     cursor: "crosshair",                                    
     zoomWindowFadeIn: 500,
     zoomWindowFadeOut: 500,
     lensFadeIn: 500,
     lensFadeOut: 500
 });

</script>

在我的product.js.coffee上我添加了一行来修改主图像的“data-zoom-image”属性并且可以正常工作

...

thumbnails.find（'li'）。on'mouseenter'，（event） - ＆gt;

  ($ '#main-image img').attr 'src', ($ event.currentTarget).find('a').attr('href')

  **($ '#main-image img').attr 'data-zoom-image', ($ event.currentTarget).find('img').attr('zoom')**

...

但提升缩放脚本无法识别此更改。

任何想法都会非常感激！

在狂欢商务上实施提升缩放

0 个答案: