Javascript 如何让ElevateToom处理多个图像
我只能使用一个图像。 因此,当我点击一个缩略图,将图像更新为所选图像时,缩放不再起作用 代码:Javascript 如何让ElevateToom处理多个图像,javascript,shopify,Javascript,Shopify,我只能使用一个图像。 因此,当我点击一个缩略图,将图像更新为所选图像时,缩放不再起作用 代码: {%包括图像的“图像样式”:特征图像,宽度:575,高度:850,小样式:true,包装器标识:包装器标识,img标识类:img标识类%} {%assign img_url=characterized_image|img_url:'1x1'| replace:'u1x1','u{width}x.%} $('#zoom_03').ezPlus({ zoomType:'内部', 光标:“十字线” });
{%包括图像的“图像样式”:特征图像,宽度:575,高度:850,小样式:true,包装器标识:包装器标识,img标识类:img标识类%}
{%assign img_url=characterized_image|img_url:'1x1'| replace:'u1x1','u{width}x.%}
$('#zoom_03').ezPlus({
zoomType:'内部',
光标:“十字线”
});
您还需要使用缩略图图像属性更新主图像属性,如上面滴滴的评论所示
解决此问题的方法是将其从id更改为类。
我在遵循ElevateToom Plus网站上的指南,这不适合我的情况 不要使用id
,而是使用class
。重复一个id
名称不是有效的HTML,您不应该这样做。谢谢,这解决了问题!我该怎么做呢?
<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