在这一篇博客中，我们将介绍Magento jQuery小部件，我们首先讨论的是gallery小部件。您可能知道，gallery小部件在产品页面上用于显示我们通过Magento后台上传的产品图像。
由于不需要初始设置，因为产品图库是开箱即用的，我们可以直接进入小部件默认提供的配置选项。正如Magento文档中所述，这些选项可以在我们的备用主题etc文件夹中的view.xml这个配置文件中设置或完善。
将配置文件从我们的后备主题（无论是Blank还是Luma）复制到我们的自定义主题后，app/design/frontend/<Namespace>/<Theme>/etc我们可以开始自定义。最常见的更改包括：
- 方向 - 指缩略图的方向：水平或垂直
- thumbnailSize - 顾名思义，这个用于设置图像缩略图的大小
- 过渡效果和持续时间 - 我们可以选择三种不同的效果：幻灯片，交叉渐变和溶解
- 标题 - 用于添加图像标题，可以设置为true或false
- 断点 - 用于设置移动视图的max-with
有更多的选择可以更改，你可以按喜好修改。我们将简要介绍另外两个配置设置——放大镜小部件和javascript捆绑。
放大镜
放大镜是一个单独的小部件，Gallery小部件使用它来放大产品页面上的产品图像。它默认是禁用的，但如果您决定启用它，您可以选择哪个用户操作将在产品图像上激活它，单击或鼠标悬停。此外，您可以设置放大镜块的位置和尺寸（高度和宽度），因为放大镜小部件将这个块设置为一个单独的、绝对定位的HTML页面div。
Javascript捆绑
关于javascript捆绑，view.xml文件中有两个配置设置。一个是用于控制生成的捆绑包的大小，另一个是用于列出我们不想捆绑的所有资产的排除列表。因此，如果您的网站有一些性能问题（即加载时间），捆绑可能是原因，您应该检查这两个配置。
常见用例
现在让我们看看gallery小部件的其他可能用途。因为它的基本目的是构建图像库，我们可以使用它来创建任何其他类型的图像库，它不一定与产品相关。我们来看看怎么做。
首先我们需要知道的是在哪里放置我们的图库。假如是我们的主页，那么我们需要创建两个文件:
app/design/frontend/<Namespace>/<Theme>/Magento_Cms/template/homepage-gallery.phtmlapp/design/frontend/<Namespace>/<Theme>/Magento_Cms/layout/cms_index_index.xml
在我们的homepage-gallery.phtml模版文件中，我们将看到以下代码：
<!-- Container for our image gallery -->
<div class="img-gallery"></div>
<!-- Script that calls gallery widget -->
<script>
require ([
'jquery',
'mage/gallery/gallery'
], function ($, Gallery) {
$(function () {
$('.img-gallery').each(function (index, element) {
Gallery({
options: {
"nav": "dots",
},
data: [
{ img: "<full_path_to_image_1>" },
{ img: "<full_path_to_image_2>" },
{ img: "<full_path_to_image_3>" }
],
fullscreen: {},
breakpoints: {}
}, element);
});
});
});
</script>让我们来看看这里有什么。首先，我们为gallery定义container，它将是带有class img-gallery的div。接下来，我们初始化gallery 小部件并指定在四个不同组中排序的各种配置设置:options，data，fullscreen和breakpoints。
对于每个组都有一些设置，但是最重要的组是data，因为它为我们的图片库保存图像。实际上它是一个图像数组，每个图像都是一个对象，并且有五个不同的属性:img，thumb，full，caption和isMain。在我们的示例中，我们只指定了一个属性img，它包含图像的完整路径。
我们的布局文件cms_index_index.xml如下所示：
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="mage/gallery/gallery.css"/>
</head>
<body>
<referenceContainer name="columns.top">
<block class="Magento\Framework\View\Element\Template" name="homepage-gallery" template="Magento_Cms::homepage-gallery.phtml"></block>
</referenceContainer>
</body>
</page>查看上面的文件，我们可以看到两个不同的代码块。在body标签中，我们调用了homepage-gallery.phtml之前创建的模板，并在head标签中添加了gallery.css库运行和正常工作所需的css文件。我们的图库是功能性的，我们可以根据项目的视觉风格继续添加一些自定义样式。
