专栏首页码代码的陈同学5行代码为你的博客引入fancybox
原创

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

相关文章

  • Spring Cloud之量化分析应用续租的内存消耗

    在分享《Spring Cloud之极端续租间隔时间的影响》 后,晓波同学问:由于心跳频率过高导致出现新对象过多?

    码代码的陈同学
  • Spring Cloud之极端续租间隔时间的影响

    本文基于某环境一个真实Case,它配置了非常极端的续租间隔时间。虽然知道服务注册的基本知识,但未深入了解过,正好基于这个Case学习下。

    码代码的陈同学
  • JVM内存管理

    Java内存管理是一项持续的挑战,同时也是锻造出可拓展应用的必备技能。本质上,Java内存管理就是一个为新对象分配内存和释放无用对象内存的过程。

    码代码的陈同学
  • 2019届网易JAVA实习2面经历

    牛客网
  • 基于FPGA灰度图像的形态学腐蚀

    数学形态学是一门建立在集论基础上的学科,是几何形态学分析和描述的有力工具。数学形态学的蓬勃发展,其并行快速,易于硬件实现,目前已经在计算机视觉、信号处理与图像分...

    FPGA开源工作室
  • python 4

    ------------------------------------------------------------

    py3study
  • 学界丨生成对抗网络(GANs )为什么这么火?盘点它自 2014 年以来的主要技术进展

    两年前,蒙特利尔大学 Ian Goodfellow 等学者提出“生成对抗网络”(Generative Adversarial Networks,GANs)的概念...

    AI科技评论
  • 生成对抗网络(GANs )诞生以来的主要技术进展

    关键字全网搜索最新排名 【机器学习算法】:排名第一 【机器学习】:排名第二 【Python】:排名第三 【算法】:排名第四 来源:雷锋网 两年前,蒙特利尔大学 ...

    昱良
  • FPGA 主流芯片选型指导和命名规则(二)

    上一篇先介绍的Xilinx,这篇就先介绍A家的吧。   主流FPGA产品(上一篇已经介绍了,简单总结)   Altera 的主流FPGA分为两大类,一种侧重低成...

    碎碎思
  • Netweaver和CloudFoundry里的trace开关

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券