我从另一个问题中得到了这个问题的答案，我可以在我的大型卡特尔商店中集成内部缩放吗?
我有一个Bigcartel网站与Luna主题。我想在我的产品图像集成一个内部变焦。但是我不能让它工作。
我添加了jquery.elevatezoom.js文件，如下所示:
<script src='http://pawsfabrik.dk/jquery.elevatezoom.js'></script>
我已经将Product页面文件中图像的代码更改为:
<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 }}">
最后我添加了激活的脚本代码，也在Product文件中:
<script>
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
</script>
但它仍然不起作用。谁能告诉我我做错了什么?我真的很沮丧:-
谢谢,爪子
你可以用Magic Zoom做到这一点。这是一个使用它的大卡特尔网站:
http://beetea.bigcartel.com/product/test-product-2该网站将图像放大到一边。相反，您可以使用内部缩放选项在主图像中进行缩放。
添加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>