0

我正在尝试在 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) ->

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

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

...

但是提升缩放脚本无法识别这种变化。

任何想法将不胜感激！

4

0 回答 0