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 条评论
登录 后参与评论

相关文章

来自专栏Python自动化测试

页面对象的定位

在自动化的测试中,对象元素的定位和操作是自动化的核心部分,但是对象是定位是自动化的基础,在对象的基础上,才可以形成对对象的操作。

923
来自专栏中国白客联盟

js之获取浏览器保存的账号密码(二)

正常情况下,当用户登录系统的时候保存了登录的账号密码的话,我们是可以利用js获取到他的表单里面的值发送过来,达到获取到他的账号密码进行下一步渗透。

9124
来自专栏守候书阁

vue插件开发练习--实用弹窗

上回说了组件(vue组件开发练习--焦点图切换)的一个练习项目,这次换下口味,说下vue的插件练手的项目。相对于现在之前的焦点图切换的组件,这个可能就更简单了,...

1572
来自专栏vue学习

小程序 — 保存图片到手机相册

(1)要保存图片到手机相册中,所以首先我们来看看保存图片的api方法是什么? 我们使用的是wx.saveImageToPhotosAlbum(OBJECT)这...

3011
来自专栏nummy

使用jsTree树形控件【1】入门

部署环境使用压缩版的jsTree.min.js,如果是开发环境可以使用jsTree.js

1672
来自专栏Golang语言社区

go语言读取csv文件并输出的方法

本文实例讲述了go语言读取csv文件并输出的方法。分享给大家供大家参考。具体实现方法如下: package main import ( "encodi...

3798
来自专栏腾讯云serverless的专栏

使用腾讯云 SCF 云函数压缩 COS 对象存储文件

如何处理 COS 对象存储中的大量文件打包需求?或许 SCF 无服务器云函数能助你一臂之力!

2K2
来自专栏静默虚空的博客

Intellij IDEA 使用小结

快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE,为大多数操作建议了键盘快捷键。在这个主题中,您可以找到最不可缺少的列表,使 I...

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

去掉windows8.1鸡肋的开始按钮

可以使用我分享的链接下载startisgone: http://download.csdn.net/detail/wangallan/8972885

1002
来自专栏Spring相关

在Vue的webpack中结合runder函数

npm i vue-loader vue-template-compiler -D

752

扫码关注云+社区

领取腾讯云代金券