1. David Wu首页
  2. WordPress
  3. WordPress安装教程

WordPress主题集成FancyBox图片灯箱

FancyBox 是一款基于 jquery 开发的类 Lightbox 插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该 lightbox 除了能够展示图片之外,还可以展示 iframed 内容,通过 css 自定义外观。原先黑糖主题里是带有这个灯箱的,只不过显示的效果过于简单,从悟空博客分享的文章里,重新折腾了一下,如今图片的显示效果还是挺好看。

FancyBox 特点:

1、允许我们用鼠标滚轮 或者 键盘上的四个方向键切换图片。

2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放了。

3、支持缩略图和按钮帮助导航。

4、弹出框支持显示多种类型的内容(图片,HTML,视频……)。

5、灯箱中按 ‘F’ 键快捷切换查看原图。

下载 fancybox

下载后解压,得到 css,img,js 三个文件夹,将这三个文件夹上传至主题根目录。本站提供的下载文件:fancyboX

引入下载

引入下载的 JS、css 文件,本站用的是开发的主题,所以在 functions.php 里找到加载 css 的函数块,加入

  1. if (cs_get_option('i_function_fancybox_switcher') && !is_home()) {
  2.         wp_enqueue_style('FancyboxCss', get_template_directory_uri().'https://img.2kss.com/fancybox/css/fancybox.css', array(), '2.1.7', 'all');
  3.         wp_enqueue_script('FancyboxJs', get_template_directory_uri().'https://img.2kss.com/fancybox/js/jquery.fancybox.pack.js', array(), '2.1.7', true);
  4.     }

JS 代码

在主题 main.js 中添加以下代码创建灯箱实例,并设置相关效果等,为了能让之前的文章图片也有灯箱效果,加入了文章图片添加 fancybox-buttons 的样式。

  1. //灯箱效果   
  2. if (fancyboxSwitcher && !isHomePage) {
  3.             var siteTitle = $("title").html();
  4.             $(".article-body img").each(function () {
  5.                 var alt = this.alt;
  6.                 var src = this.src;
  7.                 if (!alt) {
  8.                     $(this).attr("alt", siteTitle);
  9.                 }
  10.                 $(this).wrap("<a href='"+ src +"' class='fancybox-buttons' data-fancybox-group='button' title='"+ alt +"'></a>");
  11.             });
  12. 
    
  13.             $('.fancybox-buttons').fancybox({
  14. 			openEffect  : 'elastic',
  15. 			closeEffect : 'elastic',
  16. 			prevEffect : 'elastic',
  17. 			nextEffect : 'elastic',
  18. 			closeBtn  : false,
  19. 			helpers : {
  20. 				title : {
  21. 					type : 'inside'
  22. 				},
  23. 				buttons	: {}
  24. 			},
  25. 			afterLoad : function() {
  26. 				this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
  27. 			}
  28. 		});
  29.         }

添加函数

在主题的 functions.php 中添加一个自定义函数,重写文章中图片链接 a 标签的 class 属性,其实不用这一段也可以,因为上面已经添加了触发灯箱的重写,问题是如果你发的文章含有分页内容,并且是 AJAX 加载的话,还是要加上这一段才行,在发分页文章时,图片要选链接到媒体。

  1. //自动添加标签属性(fancybox图片灯箱),发布含分页文章时,图片要选链接到媒体
  2. add_filter('the_content', 'fancybox_replace',99);
  3. function fancybox_replace ($content)
  4. {   global $post;
  5.     $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png)('|")(.*?)>(.*?)</a>/i";
  6.     $replacement = '<a$1href=$2$3.$4$5 data-fancybox-group="button" class="fancybox-buttons"$6>$7</a>';
  7.     $content = preg_replace($pattern, $replacement, $content);
  8.     return $content;
  9. }

显示效果

WordPress主题集成FancyBox图片灯箱-云模板

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/98838

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注