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 元素即可。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

WordPress 中变量$allowedposttags 添加自定义HTML属性

在使用Options Framework 的时候,发现如果输入的textarea 如果是HTML 代码,一些标签的属性会被过滤(比如说date-*)属性。查看了...

1855
来自专栏智能合约

centos6关闭IPv6

1973
来自专栏Flutter入门到实战

快速在线制作json接口,从此写项目引入接口就简单多了

901
来自专栏智能合约

centos安装mongodb扩展

1144
来自专栏一个爱瞎折腾的程序猿

vue-router的history模式发布配置

如果你正在尝试将基于vue-router的项目部署到windows中,希望本文能够有所帮助。

713
来自专栏python3

CentOS 6.5 x64安装svn

#svn安装 yum install -y subversion 卸载svn旧版本 yum remove -y subversion wget http://p...

471
来自专栏性能与架构

Mysql优化中Profiling的使用

要想优化一条Query,就须要清楚这条Query的性能瓶颈到底在哪里,是消耗的CPU计算太多,还是需要的IO操作太多?要想能够清楚地了解这些信息,可以通过Que...

2754
来自专栏lonelydawn的前端猿区

前端路由的简单实现

概念 路由这个概念首先出现在后台。传统MVC架构的web开发,由后台设置路由规则,当用户发送请求时,后台根据设定的路由规则将数据渲染到模板中,并将模板返回给用户...

3284
来自专栏自由而无用的灵魂的碎碎念

解决每次从cmd进入sqlplus,都得重新设置pagesize、linesize的问题

如上图,经过测试,主要需要更改屏幕缓冲区大小,这里更改宽度为130。为防止每次进入cmd都调节窗口的大小,这里设置窗口大小,宽度为与缓冲区一致。

712
来自专栏深度学习之tensorflow实战篇

SQL中distinct的用法

在表中,可能会包含重复值。这并不成问题,不过,有时您也许希望仅仅列出不同(distinct)的值。关键词 distinct用于返回唯一不同的值。 表A: ? 表...

2783

扫码关注云+社区