如何解决从SVG图标打开fancybox画廊,但在右侧拇指列表中显示原始图像
我在许多项目中都使用过fancybox。通常,我会从图像拇指触发图像弹出屏幕,但是现在我必须从img类中的SVG图标触发它。 fancybox接受该图标并将其显示在右侧拇指列表上。它应该显示来自具有data-fancybox属性的标签的实际图像。
以下是将图像拇指作为弹出触发器的正常工作方式:
<a href="image.jpg" data-fancybox="gallery">
<img class="thumb" src="image.jpg">
</a>
这将达到预期效果,画廊弹出窗口打开,右侧列表中包含正确的图像。
但是现在,当我使用SVG图标触发弹出窗口时,它会在右侧画廊缩略图列表中显示SVG。
<a href="image.jps" data-fancybox="gallery">
<img src="img/zoom_plus.svg" style="height:50px;">
</a>
有人有同样的需求,您是如何解决的?找不到原始文档中的信息:https://fancyapps.com/fancybox/3/docs/
解决方法
我通过在图标图像之前添加图像并将其显示设置为无来解决问题。它现在正在运行,但想知道它是如何正确完成的。
<a href="image.jps" data-fancybox="gallery">
<img src="image.jpg" style="display:none;">
<img src="img/zoom_plus.svg" style="height:50px;">
</a>
,
使用data-fancybox-trigger
属性,请参阅文档-https://fancyapps.com/fancybox/3/docs/#usage
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。