5行代码为你的博客引入fancybox

欢迎访问 陈同学博客原文 查看更多文章

fancybox 官网、github

官网介绍：JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable

引入目的&感谢

• 引入fancybox目的：解决移动端访问博客文章时，图片无法放大影响阅读体验问题。

• 感谢：超级感谢 张帆 反馈手机端访问文章时图片无法放大，影响阅读的问题，同时推荐了 fancybox 这个组件来解决这个问题。

fancybox官方Demo

官方Demo code很简单，将需要处理的 img 标签放到一个有 data-fancybox="gallery" 属性的 a 标签中即可，*href* 属性配置成放大后的图片。

<a data-fancybox="gallery" href="big\_1.jpg">
    <img src="small\_1.jpg">
</a>

5行代码集成到博客

自行引入对应的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 元素即可。