在 WordPress 中添加图片灯箱效果

有的时候，我们需要仔细地观察一下博客的图片，右键在新标签页中加载图片并不太优美，有没有更好的解决方案呢？

我们可以稍微对博客主题进行一点小更改。

首先，我们打开主题编辑器，在 footer.php 中/body前面的部分加入下面的代码：

<script src="https://cdn.bootcss.com/lightgallery/1.6.12/js/lightgallery-all.js"></script><script>
var lg_ar = Array(), images = Array();
jQuery(document).ready(function(){
    jQuery(".entry-content img").each( function() { 
        jQuery(this).css('cursor', 'pointer'); 
        var element = jQuery(this).siblings("figcaption");
        var img_alt = jQuery(element).text();
        lg_ar[ lg_ar.length ] = { "src": this.src, "thumb": this.src, "subHtml": img_alt + "<br/>By Studying Father"}
    });
    
    images = jQuery(".entry-content img");
    for( var i = 0; i < images.length; i ++ ) {
        images[i].now = i;
        jQuery(images[i]).click( function() { 
            var tmp = this.now;
            jQuery("body").lightGallery({
                autoplay: false,
                autoplayControls: false,
                share: false,
                counter: true, 
                dynamic: true, 
                download: false,
                dynamicEl: lg_ar
            });
            jQuery("body").data('lightGallery').index = tmp;
        });
    } 
});
</script>

接下来在 header.php 中的head部分添加下面内容：

<link href="https://cdn.bootcss.com/lightgallery/1.6.12/css/lightgallery.min.css" rel="stylesheet">

然后就可以实现点击图片预览的效果啦！

目前支持左右翻图，图片放大和缩小等功能。

注意：应当引用 WordPress 内部的 jQuery。

致谢

感谢 Woshiluo 的帮助。

感谢 sachinchoolur/lightGallery 项目。