解决 PrettyPhoto Lightbox 不工作的问题
最近 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 里边的一堆东西也得上传到服务器。不然按钮啥的都看不见。
你这个主题好简洁,其实我觉得网站结构好,代码精简,内容对用户有帮助就可以了。