Question

我已经通过qustion解决了这个问题的另一个答案Can I integrate an Internal zoom on my products in my big cartel store?

我有一个带Luna主题的Bigcartel网上商店。我想在我的产品图片上集成内部缩放功能。但我无法让它发挥作用。

我已经像这样添加了jquery.elevatezoom.js文件：

<script src='http://pawsfabrik.dk/jquery.elevatezoom.js'></script> 在布局文件中。

我已将产品页面文件中的图片代码更改为：

<img id="zoom_01" src="{{ image | product_image_url: "fullsize" }}" data-zoom-image="{{ image | product_image_url: "fullsize" }}" class="fade_in" alt="Image of {{ product.name | escape }}">

最后，我还在产品文件中添加了要激活的脚本代码：

<script> $('#zoom_01').elevateZoom({ zoomType: "inner", cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 750 }); </script>

但它仍然无法奏效。有谁能告诉我我做错了什么？我真的很沮丧： - （

感谢名单，爪子

Answer 1

您可以使用Magic Zoom执行此操作。这是一个使用它的Big Cartel网站：

http://beetea.bigcartel.com/product/test-product-2

该网站将图像放大到一边。相反，您可以使用internal zoom选项在主图像中进行缩放。

将Magic Zoom添加到布局文件，例如

<script src='http://pawsfabrik.dk/magiczoom.js'></script>

然后添加产品图片代码：

<a href="{{ image | product_image_url: "fullsize" }}" class="MagicZoom" rel="zoom-position: inner"><img src="{{ image | product_image_url: "fullsize" }}" alt="Image of {{ product.name | escape }}"/></a>

在我的大型卡特尔商店中集成我的产品的内部缩放功能

1 个答案: