原来我的站点有集成FancyBox图片灯箱啊,那就顺带升级美化了下。

原创 野人  2021-10-29 09:01  阅读 107 次
电费/话费9折起

前天写Zblog插件的介绍的时候,发现插入的图片不能放大/缩小看,这用户体验确实不太行,当时就默默把这事记下了。

因为本博客使用的主题,并不是自己写的,所以在这之前并不知道因为集成了FancyBox图片灯箱的插件,然后在实际折腾的过程中才发生原来早就安装了,只是因为我插入图片的方式不对导致FancyBox插件不能正常识别到,先给大家看下错误的示范。

  <img src="图片链接" />

正确的示范,a标签包裹着,然后再添加个data-fancybox="images"属性,作用就是让FancyBox识别到,其实这块的话,建议大家看下官方文档,写的都是很详细,反正就是要用这个插件,一定要根据它定义的规定走,这样才能跑的起来,用的起来。

<a href="图片链接" data-fancybox="images">
  <img src="图片链接" />
</a>

知道了是因为自己插入图片的方式错误后,就再去了解下FancyBox。发现人家已经升级到4.0.8的版本了,也就是最新版本了,而我的站点还在使用3.1.20,体验了下新版的FancyBox,发现展现的界面效果更好看了,而且插件的配置项也变多了,API更加的灵活,我自己本地搭建并成功体验了一番,真心不错,唯一不足的是,新版的体积变大了。

这里所说的体积,是FancyBox.css+FancyBox.js,也就是满足正常运行所必须的文件

旧版的体积:63KB

新版的体积:116KB

差了大概50KB吧,但是我是觉得牺牲点磁盘空间和流量,换来界面好看,功能多,这心情不错,值得,哈哈。

顺带给大家分享下,如果你也是使用WordPress的程序,也想用新版的FancyBox,但是之前并没有装过FancyBox的话,可以直接复制以下的代码到自己当前所使用的主题下面的function.php文件?>之前,代码如下;

//加载最新版的Fancybox v4.0.8,并将一些按钮配置提示中文化
function fancybox_scripts()
{
	wp_enqueue_style('fancybox', get_template_directory_uri() . '/fancybox.css', array(), '1.0');
	wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/js/fancybox.umd.js', array(), '2.0', false);
	wp_add_inline_script('fancybox', '
		Fancybox.defaults.l10n.CLOSE = "关闭";
		Fancybox.defaults.l10n.DOWNLOAD = "下载";
		Fancybox.defaults.l10n.NEXT = "下一张";
		Fancybox.defaults.l10n.PREV = "上一张";
		Fancybox.defaults.l10n.TOGGLE_FULLSCREEN = "全屏模式";
		Fancybox.defaults.l10n.TOGGLE_SLIDESHOW = "幻灯片放映";
		Fancybox.defaults.l10n.TOGGLE_THUMBS = "缩略图";
		Fancybox.defaults.l10n.TOGGLE_ZOOM = "缩放";
	');
}
add_action('wp_enqueue_scripts', 'fancybox_scripts');

然后,因为上面的代码中有引入FancyBox,所以需要把引入的资源下载下面放到对应的目录,这样才可以正常运行,你需要下载的文件有;

fancybox.css(样式文件,放到自己当前所使用主题的根目录下):https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.8/dist/fancybox.css

fancybox.umd.js(插件主程序,放到自己当前所使用主题的根目录下的js文件夹下,如没有js文件夹就自行创建一个,放入即可):https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.8/dist/fancybox.umd.js

如果配置成功的话,那么点击图片的话,就可以看到FancyBox的图片灯箱了。

当然了,对于已经有安装过FancyBox插件的朋友,无论是WordPress还是ZBlog,任意博客程序等等,只要找到自己程序中FancyBox插件的css样式和js文件所在位置后,直接把里面的内容替换成最新版的文件内容,这样也就是升级成功了,也就可以享受最新版的FancyBox功能和界面。

好了,说了那么多,大家可以直接点击上方的图片,看下我升级FancyBox后的实际效果。

本文地址:https://www.yerenwz.com/4968.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论

  1. p
    p 【农民】 @回复

    学习了,哈哈