全站启用 fancybox 图片预览插件

06-08-2020
最近更新于:2022-06-15 23:58:07

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;
    });

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


评论留言

既来之则留之,欢迎在下方留言评论。提交评论后还可以撤销或重新编辑,未发布的留言会被储存在本地以供下次继续编辑(Valine 会自动保存您的评论信息到浏览器)