欢迎访问 陈同学博客原文
官网介绍:JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable
官方Demo code很简单,将需要处理的 img 标签放到一个有 data-fancybox="gallery"
属性的 a 标签中即可,*href* 属性配置成放大后的图片。
<a data-fancybox="gallery" href="big\_1.jpg">
<img src="small\_1.jpg">
</a>
自行引入对应的css/js
实现思路与方式非常简单:动态为所有 img 标签添加一个父元素即可,有效代码就 5 行
// 集成fancybox, 为所有img元素添加父元素
$("img").each(function () {
// $(this).attr("data-fancybox", "gallery"); 直接给img添加data-fancybox会导致点击图片后图片消失
var element = document.createElement("a");
$(element).attr("data-fancybox", "gallery");
$(element).attr("href", $(this).attr("src"));
$(this).wrap(element);
});
下面是手机上访问文章 Mysql thread 与 OS thread 时放大其中一张图片的效果。
我的博客使用 Editor.md 作为markdown编辑器,在展示页面时,当editor.md渲染完html页面后,再使用上述代码动态处理 img 元素即可。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。