javascript - 如何让 elevateZoom 处理多个图像
问题描述
我只能让 elevateZoom 处理一张图片。因此,当我单击将图像更新为所选图像的缩略图时,缩放不再起作用。
代码:
<div class="product-single__photo--flex-wrapper">
<div class="product-single__photo--flex">
{% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
<div id="{{ wrapper_id }}" class="product-single__photo--container product-single__photo--container-thumb">
<div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;">
{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img id="zoom_03" class="product-single__photo lazyload {{ img_id_class }}"
src="{{ featured_image | img_url: '300x300' }}"
data-zoom-image="{{ featured_image | img_url: '1080x1080' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
data-image-id="{{ featured_image.id }}"
alt="{{ featured_image.alt | escape }}"
data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}">
<noscript>
<img id="zoom_03" class="product-single__photo"
src="{{ featured_image | img_url: 'master' }}"
data-zoom-image="{{ featured_image | img_url: '1080x1080' }}"
{% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}" data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}">
</noscript>
<script>
$('#zoom_03').ezPlus({
zoomType: 'inner',
cursor: 'crosshair'
});
</script>
</div>
</div>
</div
这是在 Shopify 上使用的。一张图片有效,多张无效。关于如何让它发挥作用的任何建议?
解决方案
根据上面滴滴的评论。
解决此问题的方法是将其从 id 更改为 class。
我按照 elevateZoom-Plus 网站上的指南进行操作,这不适合我的情况。
推荐阅读
- c# - 如何使用 Linq 使用另一个列表的值对列表进行排序
- angular - 为什么将选项卡添加到 mat-tab-group 不能从单独的组件中工作?
- c++ - 在 C++ 的 fluent interface 中设置后立即调用析构函数
- javascript - 在 Node 的 GET 请求之后将数据传递给 MongoDB
- amazon-web-services - flutter_facebook_login 和 AWS:登录令牌无效。不是有效的 OpenId Connect 身份令牌
- bash - 来自字符串的Bash关联数组?
- python - 无法弄清楚为什么我的 if/else 语句不像我想要的那样工作
- java - Java Parking Ticket Simulator - 类聚合/复制构造函数
- python - 在 MatPlotlib 图中的每个条形顶部添加一条线
- python - 如何从 python 中的网站读取 txt 文件