放大产品图像上的展开图标-Fancybox

编程问答 2022-06-02

问题描述

我正在尝试在移动设备上产品图片的右下角添加一个小图标，以便人们知道他们可以单击图片来放大图片。

我们已经安装了fancybox zoom，我正在尝试使用一些代码（请参见下面的代码），以便我可以添加一个小图标，指示您可以放大图像。

此代码已插入到我们的另一个网站上，因此我认为这也可以在该新网站上使用。部分代码还包含应该仅在桌面上显示的文本，表明您可以单击图像进行放大。

出于某种原因，我的product.liquid中的此代码似乎无法正常工作。

 <p class="hc-center">Click for image details</p>
    
    <div class="hc-zoom-expand">
      <svg class="i-pwa-zoom" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" aria-label="Zoom In" role="img" focusable="false"><circle class="i-pwa-zoom__circle" fill="#fff" cx="12.5" cy="12.5" r="12.5"></circle><path class="i-pwa-zoom__arrows" fill="#222" d="M14.1 6.1v1l3.1-.1-4 4 .7.7 4-4.1v3.1h1V5.8l-4.8.3zM7.8 17.9l4-4.1-.7-.7-4 4.1v-3.1h-1V19l4.9-.1v-1H7.8z"></path></svg>
    </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fancyboxfancybox-3shopifyshopify