Alex_McAvoy

想要成为渔夫的猎手

Next 7.0+ FancyBox 图片缩放

FancyBox 是基于 JQuery 开发的类 Lightbox 插件,可以将图片放大查看,同时支持对放大的图片添加阴影效果,并对于一组相关的图片添加导航操作按纽

关于 FancyBox 的更多介绍:点击这里

对于 Next 7.0+ 主题来说,当文章出现图片时,无法将图片放大查看,为此其内置了 FancyBox3,关于该插件的具体介绍见其 GitHub 仓库

若想开启 FancyBox 功能,具体操作步骤如下:

1.修改主题 _config.yml 文件

theme/next/ 文件夹下找到 Next 7.0+ 主题的 _config.yml 配置文件

之后在其中找到 fancybox 字段,将其改为 true

1
2
3
# FancyBox 图片缩放
# For more information: https://fancyapps.com/fancybox
fancybox: true
2.启用 fancybox CDN

在 NexT 主题下的配置文件 _config.yml 中,开启 CDN

1
2
fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

需要注意的是,FancyBox 是基于 JQuery 开发的,而 Next 7.0+ 没有直接导入 JQuery,因此在使用该插件前,要先导入 JQuery,具体方法见:Next 7.0+ JQuery 的导入

感谢您对我的支持,让我继续努力分享有用的技术与知识点!