有的时候,我们需要仔细地观察一下博客的图片,右键在新标签页中加载图片并不太优美,有没有更好的解决方案呢?
我们可以稍微对博客主题进行一点小更改。
首先,我们打开主题编辑器,在 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 项目。