替换 Kratos 2.x 主题的图片灯箱

默认情况下本站主题使用的是 layui 家的 layer 弹出层组件来提供图片灯箱功能。

使图片灯箱生效代码是主题目录下 /js/kratos.js 文件内 showPhotos() 函数。

	var showPhotos = function() {
		layer.photos({
		  photos: '.kratos-post-content'
		  ,anim: 0
		}); 
	}

并在 /functions.php 文件内引入相关 JS 和 CSS 文件。

wp_enqueue_style( 'layer', $dir . '/css/layer.min.css', array(), KRATOS_VERSION);
wp_enqueue_script( 'layer', $dir . '/js/layer.min.js', array(), '3.0.3');

这功能忍它很久了,以下两点让人不爽:

  1. 点击后放大图片是根据显示器的比例来放大的,如果一张高分辨率图片就不能进行放大等动作,而且在手机小屏幕上由于边距设置得很大又不能放大缩小,看图一点帮助都没有,这就是鸡肋了。
  2. 不能控制作用范围,友情链接读者墙之类的地方点击用户头像也给一个弹出层遮挡,影响体验。

解决方案(转载)

在 header.php 添加以下代码

<!-- 图片放大 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

在 footer.php 添加以下代码

<!-- 图片放大 -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

在 functions.php 添加以下代码

/**图片灯箱自动给图片加链接**/

add_filter('the_content', 'fancybox');
function fancybox($content){ 
    $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i");
    $replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>');
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

效果如下:
《替换 Kratos 2.x 主题的图片灯箱》


当然第一次用为了尽量排除其他可能造成的不确定因素,我把 JS 和 CSS 文件都下载到了本地,按照主题原来的方式进行引用。

结果….并没有图内完整的效果:

  • 没有工具栏
  • 点击图片返回后图片就从网页消失了

刚开始以为还要加什么料,在 ryanzoe.top 家一个个地翻看它的 js 等文件,还交叉替换了 js 文件,搞老半天问题依旧,还好它的主题和本站的 kratos 都是一个老板做的,很多东西看上去比较熟悉。那最可能的是本站主题某个配置引起的问题了。

/**
 * Auto post link
 * 
 * @author Vtrois <seaton@vtrois.com>
 * @license GPL-3.0
 */  

function kratos_auto_post_link($content) {
  global $post;
  $content = preg_replace('/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i', "<img layer-src=\"$2\" src=\"$2\" alt=\"《".$post->post_title."》\" />", $content);
  return $content;
  }
add_filter ('the_content', 'kratos_auto_post_link',0);

这是本站主题 functions.php 下的一个函数,用于给 img 标签自动加 alt 属性,属性值为文章标题。

问题就在 add_filter() 第三个参数 0 上,它表示这个过滤函数的优先级,数字越大表示越后面执行,默认为 10。它先执行就会和我们上面的 fancybox() 产生冲突。

把 0 改成 99 就一切都好了,就这样:
add_filter ('the_content', 'kratos_auto_post_link',99);

完成!该删的删,来张大图效果(点击图片)如下:

《替换 Kratos 2.x 主题的图片灯箱》

爽了!


2021-10-02:错了,在 kratos_auto_post_link() 中 img 标签还自定义了一个“layer-src”属性,这个也是关键吧。

发表回复

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

  1. 云落 说道:

    其实。。不爽第二点,应该是你指定的clads值太大了

    1. 黑鸟 说道:

      看不懂,不想看,全套换,一把梭哈。 :021: