在Shopify上使用JQuery缩放和JavaScript缩放产品图像

在网上销售时，最需要的产品功能之一是图像缩放。缩放通常用于产品图像放大，以便潜在客户更好地观看。网上有很多不同的缩放库是免费的，在本文的最后，我将介绍几个你可以使用Shopify主题的选项。

在本教程中，我已经包括了两种方法，你可以使用它来添加缩放到你客户的网站:

• jQuery变焦,或
• 香草JavaScript缩放

请确保只使用其中一种方法，而不是两种方法都使用。这是两个独立的教程，所以选择最适合你的。让我们开始吧。

1.通过jQuery缩放

我选择了老调重弹，但也很好听，jQuery缩放由杰克摩尔．我们目前使用这个插件在免费的Shopify主题中缩放产品图像，首次亮相．这个缩放插件几乎没有样式(所以你可以自己定制)，而且实现起来超级简单。我最喜欢这个插件的地方是它有一个清晰的更新日志在网上被很多人使用。

查看演示商店下载jQuery Zoom

该插件兼容Chrome, Firefox, Safari, Opera和Internet Explorer 7+中的jQuery 1.7+。

如果你现在已经为主题设置了一个节点，你可以通过npm通过运行:

NPM安装jquery-zoom

或者，你可以下载jQuery缩放插件。

要了解更多工具，请查看我们最喜欢的工具列表崇高的文本插件．

1)如果不存在jQuery，添加jQuery

大多数主题已经运行了jQuery版本，这个插件需要1.7以上的最低版本才能工作。这意味着对于大多数Shopify主题，您可能不需要添加jQuery，除非您从头开始构建主题。如果您正在构建一个应用程序并使用jQuery，请务必阅读有关文档如何负责任地使用jQuery，以避免与已经包含它的主题发生冲突。

你可以检查你的主题，看看jQuery是否已经被加载，通过搜索脚本或转到控制台TAB在检查器中运行jQuery.fn.jquery，它将返回网站正在运行的jQuery版本。

或者，您也可以检查theme.liquid来查看它是否正在加载或已经加载vendor.js文件内的脚本/目录中。不要加载多个版本的jQuery在一个网站上，因为这会增加页面的加载时间，并在您的客户端站点上引起一系列其他JavaScript问题。

如果你需要添加jQuery到你的主题，只需添加以下一行到你的html头部:

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js推迟“推迟= > < /脚本>

2)添加zoom.min.js插件文件到你的主题

从您下载的插件文件夹中，添加缩小的jQuery缩放插件(jquery.zoom.min.js)到你的资产文件夹中。然后，在你的theme.liquid文件,后在jQuery加载的地方，使用下面的Liquid代码将插件文件链接到您的主题。考虑添加一个检查，只在产品页面上包含它，而不是在所有页面上(特别是如果它只在产品页面上使用):

如果模板包含'product' %}
 .js
{% endif %}

或者，还可以将简化后的代码添加到vendor.js文件，就像上面的jQuery指令一样——如果你已经有一个使用它的主题——以避免额外的请求。

如果您正在使用ES6，您可以执行以下操作在项目中包含漂移:

2)编辑product.liquid以瞄准放大后的图像

为了实现漂移缩放，它将HTML添加到具有CSS定位的元素中。如果没有指定包含缩放图像的元素，那么它将默认覆盖在顶部，并与最近定位的父元素对齐。

首先，让我们在您的主产品图像中添加一个包装器product.liquid模板，并在其中添加一个空div类图像细节．如果您正在使用部分，则可以改为添加data-zoom属性为产品部分的特色图像。注意featured_image因为你的产品可能被称为其他东西，这取决于你使用的主题。

< div class = "图像容器”>

< div class = "图像细节" > < / div >
< / div >

您还需要使用Liquid生成大图(即放大后的图像)的URL作为数据属性。在这种情况下，我给它命名data-zoom．我们将在稍后的初始化中使用它，以指定更大的图像版本。

3)初始化漂移并设置选项

下一步是基本设置，非常简单:

的类在图像上初始化漂移图像变焦，然后我们设置paneContainer到.image-detailsDiv，以便设置将呈现到该容器的放大内容的输出。

您还可以为漂移设置其他更具体的选项，包括偏移量、缩放量、启用触摸等。这些选项可以在漂移的GitHub页面．

4)自定义设置和样式

这个过程的最后一步是设置任何附加的样式，你想包括你的图像缩放漂移。除了缩放区域覆盖整个页面，您还可以添加样式，以便将其设置在一侧，或覆盖页面上的其他内容。

我用CSS网格为两列添加了一些简单的样式，你可以在上面的演示中看到:

替代插件和Shopify应用程序

如果你不喜欢使用上面教程中的两个选项，这里有一些可供选择的选项。我还包括了两个专门用于产品缩放的Shopify应用程序。

EasyZoom插件

EasyZoom是一个优雅的，高度优化的jQuery图像缩放和平移插件。它支持触控设备，并且可以很容易地使用CSS进行定制。

ZooMove插件

ZooMove用jQuery开发的插件，允许您动态缩放图像与鼠标移动，并查看细节。兼容:Chrome 42+、Firefox 41+、Safari 9+、Opera 29+、Internet Explorer 9+中的jQuery 1.7+。

除了这些免费的插件，你还可以为你的客户安装付费的Shopify应用程序。

Magic Zoom Plus应用程序

Magic Zoom Plus允许用户悬停缩放图像，点击放大图像。它是Shopify应用商店中排名最高的Shopify图像缩放应用程序之一，适用于移动设备。该应用程序有30天的免费试用，一次性价格为69.00美元。

产品图片放大由Gowebbaby应用程序

产品图片放大由Gowebbaby是Shopify应用商店上的另一款图像缩放应用，它在缩放区域周围使用一个盒子或镜头，让它感觉像放大镜在检查产品。它的售价是每月3.99美元，还有三天的免费试用期。

你可能还会喜欢:如何在Shopify中创建一个可定制的公告栏．

得到放大

使用产品缩放插件可以成为转换的强大工具，使客户能够近距离接触您的客户正在销售的产品。在构建自定义主题时，通过增加客户端的销售和添加额外的功能，您可以为项目增加一些额外的计费时间。希望在本文的帮助下，添加额外的功能会更快一些。