LV02-NexT-04-fancybox

发表于 分类于 本文字数： 911 阅读时长 ≈ 3 分钟

本文主要是fancybox使用的一个bug修复的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。

点击查看使用工具及版本
Windows windows11
Ubuntu Ubuntu16.04的64位版本
VMware® Workstation 16 Pro 16.2.3 build-19376536
点击查看本文参考资料
参考方向 参考原文
------
点击查看相关文件下载
--- ---

文章是后来又整理的，可能不适用于最新版的主题，可以作为参考。

一、fancybox简介

fancybox是一款基于jquery开发的类Lightbox插件，它可能是世界上最受欢迎的lightbox脚本了。这个脚本它依赖于jquery，其中jQuery 3+是首选，但fancybox也兼容jQuery 1.9.1+和jQuery 2+。

二、基本使用

这里借用fancybox官网首页的快速开始的例子，最基本的使用方式如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 1. Add latest jQuery and fancybox files -->

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

<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>

<!-- 2. Create links -->

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

<!-- 3. Have fun! -->

示例如下图所示(点击图片可以查看我的博客中fancybox的使用效果)：

img

三、在NexT主题中的问题

首先，聊一聊整个问题是怎么发现及产生的。在NexT中，已经加载了fancybox的所需脚本，所以我们直接在主题配置文件中将其打开就可以了。

1
2
3
yaml [blogRoot]/_config.next.yaml
# true表示打开fancybox，fasle为关闭fancybox
fancybox: true

但是在开启后，我们去放大图片，会发现是没有问题的，但是在关闭图片预览的时候，整个页面会向左抖动一下，具体原因是，fancybox在开启图片预览后，是遮盖了原来的页面，相当于蒙上了一个黑色但是透明的页面，这个时候右侧原来的滚动条是被隐藏了，当关闭图片预览的时候，滚动条重新出现，导致整个页面有一个向左抖动的情况，那么怎么解决整个问题呢？

我们去fancybox的github仓库去看源码，会发现有这么一个参数hideScrollbar，就是导致了放大图片的时候滚动条隐藏的原因，将其值设置为true就可以使滚动条一直显示，这样就解决了整个抖动的问题。

然后我们来解决NexT中的这个问题。新建一个脚本文件myfancybox.js，并添加以下代码：

1
$.fancybox.defaults.hideScrollbar = false; // 使右侧滚动条一直显示

在[blogRoot]/themes/next/layout/_layout.njk文件的<body></body>中引用该文件即可

1
2
3
# [blogRoot]/themes/next/layout/_layout.njk
# theme.fancybox_param为上边新建myfancybox.js脚本的路径
<script async src="{{ theme.fancybox_param }}"></script>

然后再 hexo cl && hexo g && hexo s 就可以发现抖动的问题解决了。