摘要：
  本文主要讲述在NexT中使用fancybox的时候的遇到问题及解决办法。

1.fancybox介绍

  fancybox是一款基于jquery开发的类Lightbox插件，它可能是世界上最受欢迎的lightbox脚本了。这个脚本它依赖于jquery

，其中jQuery 3+是首选，但fancybox也兼容jQuery 1.9.1+和jQuery 2+。

2.fancybox基本使用

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

html
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的使用效果)：

3.fancybox在NexT主题中的问题

  • 首先，聊一聊整个问题是怎么发现及产生的
      在NexT中，已经加载了fancybox的所需脚本，所以我们直接在主题配置文件中将其打开就可以了。
yaml [blogRoot]/_config.next.yaml
1
2
# true表示打开fancybox，fasle为关闭fancybox
fancybox: true

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

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

  • 其次。我们来解决NexT中的这个问题

  新建一个脚本文件myfancybox.js，并添加以下代码：

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

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

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

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