最近 Forece 把自己博客的 WordPress 主题模板用 Bootstrap 4 重写了一遍，把移动端的自适应给做好了。就差最后的 Lightbox 问题了。之前一直用的 PrettyPhoto 插件。原来用的好好的。更新模板之后怎么也不好用了。之前也出现过这样的问题。解决过后就又把自己怎么解决的给忘了。还好网上查了下资料，又把问题给解决了。

PrettyPhoto 是一个 Js 灯箱特效，只不过被整合到了 WordPress 中，因为一直使用的就是这个灯箱插件，所以这次直接把插件卸载了，直接挂原生 Js 文件。发现还是无效，灯箱出现问题的原因其实挺多。

1. WordPress 图片没有做媒体链接

2. 图片没有做 rel="prettyPhoto"

每个图片手动写 rel 属性太麻烦，并且会毁数据，以后换灯箱插件还得清理数据，直接用 js 动态挂载属性比较好。

<script>
    $(document).ready(function () {
       $('.blog-content a').has('img').attr('rel', 'prettyPhoto');
    });
</script>

3. Jquery 版本过高

PrettyPhoto 只支持到 jQuery 1.9 版本，上到 3.x 版本后有一些语法被修改了，所以失效。Stackoverflow 找到解决办法，搜索 .size() 然后修改成 .length 即可。或者直接用低版本的 jQuery 也可以。

PrettyPhoto Lightbox 加载方法

<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/css/prettyPhoto.css">
<script src="<?php bloginfo('template_url') ?>/js/prettyPhoto.min.js"></script>
<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
   $('.blog-content a').has('img').attr('rel', 'prettyPhoto');
   $("a[rel^='prettyPhoto']").prettyPhoto();
 });
</script>

最后别忘了 images 里边的一堆东西也得上传到服务器。不然按钮啥的都看不见。

打赏分享