0

我已经从一个关于这个问题的问题中得到另一个答案我可以在我的大型卡特尔商店中集成我的产品的内部缩放吗？

我有一个带有 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>

但它仍然不起作用。谁能告诉我我做错了什么？我对此感到非常沮丧:-(

谢谢，爪子

4

1 回答 1

0

您可以使用 Magic Zoom 做到这一点。这是一个使用它的大卡特尔网站：

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

该站点将图像缩放到一侧。相反，您可以使用内部缩放选项在主图像中进行缩放。

将魔术缩放添加到布局文件，例如

<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>
于 2014-06-05T08:11:58.230 回答