全站启用 fancybox 图片预览插件

2Broear

发布于 2024-03-12 10:22:33

1190

发布于 2024-03-12 10:22:33

文章被收录于专栏：2B博客2B博客

fancybox.js

JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.

图片预览插件

图片预览的话有很多插件，不过 fancybox 我认为是比较公然好评的一款，之所以使用它也是因为之前把图片预览关掉了（像图片比较多的页面还是比较不方便），优缺点以及在 weblog 里讲了，这里简单记下使用的步骤

简单安装

fancybox.js 依赖于 jQuery，这一点也是比较片面的，毕竟要使用 jq 才行（有一款纯js的，不过安装比较麻烦），那么首先引入 jq

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

然后是 fancybox.js 核心文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

使用说明

很简单，在需要加入 fancybox 的图片外包裹一个特定的 a 标签就ok

href 填写图片路径即可

<a data-fancybox="gallery" href="1.jpg">
      <img src="1.jpg" />
  </a>

其他

因为我图片启用了 lazyload ，所以直接获取 img.lazy 的 data-original 属性的值填充到 a 标签的 href 内即可。

~~全局启用后有的不需要 fancybox 效果的页面图片也被应用了 fancybox 效果，所以加了个父元素是否为 a 标签的判断。~~

目前只想在 news 和 notes 两个页面应用该效果，通过 box 的 class 来判断容器（需要同时判断 iboxes 因为 container 内包含了 ibox，会导致的问题是有 ibox 页面 img 都会被包裹）

以上判断均有 bug

尝试了几种方案，其中最合适的还是 直接遍历 img 所有父元素，判断是否能匹配指定类名，是则文章页面（指定类名仅 news 和 notes 页面）

$('img.lazy').each(function(){
        let img=$(this),
            src=img.attr('data-original'),
            box=img.parents();  //box=img.parents('news-article-container')
        //box ? img.wrap('<a data-fancybox="gallery" href="'+src+'"></a>') : false;
        box.hasClass('news-article-container') ? img.wrap('<a data-fancybox="gallery" href="'+src+'"></a>') : false;
    });

以上，有问题评论区反馈。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-06-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

遍历