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

相关文章

来自专栏腾讯云serverless的专栏

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

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

1.7K2
来自专栏柠檬先生

Vue 源码分析—— 目录结构

 1.compiler 目录包含Vue.js 所有编译相关的代码。它包括把所有模板解析成ast 语法树, ast 语法树优化等功能。

1162
来自专栏IT大咖说

R语言实例:利用css对shiny页面优化及htmlwidgets创建控件

摘要 本演讲将介绍如何利用CSS对shiny页面进行个性化设计及在网页中嵌入视频;并通过一个详细案例介绍了利用htmlwidgets包开发HTML控件,基于D3...

3126
来自专栏Play & Scala 技术分享

[Play-Scala-2.2.1] 接收jQuery Post的原始字符串请求

3038
来自专栏CSDN技术头条

Python 开发者的微信小程序开发实践

导读 在知乎上,有人提问“如何使用 Python 开发微信小程序”。 ? 其实微信小程序作为一个前端的机制,Python 并不能插上边。只不过可以作为后端接口...

9527
来自专栏Spring相关

在Vue的webpack中结合runder函数

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

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

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

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

912
来自专栏静默虚空的博客

Intellij IDEA 使用小结

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

2736
来自专栏vue学习

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

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

1121
来自专栏Python自动化测试

页面对象的定位

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

793

扫码关注云+社区