图片放大效果的灯箱插件我试过很多，比如 Fancybox 、Fancyzoom、Lightbox 等等众多比较流行的，然而始终不是很喜欢。。 今天在逛 [ 设计笔记 ] 的时候，突然被他的灯箱效果给吸引到了。。于是乎就果断想扒过来用用。。。在查看源码的时候，发现他用的是 ViewImage 关于ViewImage 可以前往这里查看介绍 [ GO ] 不过貌似需要翻墙哦。 作者也给出了简单明了的说明，这里我分享下我的使用过程。
使用过程
1.去掉正在使用的灯箱代码和引用 如果主题已经有灯箱插件，需要去掉相关引用和代码，我已经去掉完了。 2.针对 wordpress 主题，检查是否有如下这段 JS 代码 wordpress 的主题，很多人为了能使用灯箱效果，添加了如下一段 JS 代码：//图片添加a标签
$(function(){
$('.single img').each(function(i){
if (! this.parentNode.href) {
$(this).wrap("");
}
});
});/**
* ViewImage.min.js
* https://tokinx.github.io/ViewImage/
*/
!function(a){a.extend({viewImage:function(b){var c=a.extend({target:".view-image img",exclude:"",delay:300},b);a(c.exclude).attr("view-image",!1),a(c.target).click(function(){var b=a(this).attr("src"),d=a(this).attr("href"),e="",f="<style class='view-image-css'>.view-img{position:fixed;background:#fff;background:rgba(255,255,255,.99);width:100%;height:100%;top:0;left:0;text-align:center;padding:2%;z-index:999;cursor: zoom-out}.view-img img,.view-img span{max-width:100%;max-height:100%;position:relative;top:50%;transform: translateY(-50%);}.view-img img{animation:view-img-show .8s -0.1s ease-in-out}.view-img span{height:2em;color:#AAB2BD;overflow:hidden;position:absolute;top:50%;left:0;right:0;width:120px;text-align:center;margin:-1em auto;}.view-img span:after{content:'';position:absolute;bottom:0;left:0;transform: translateX(-100%);width:100%;height:2px;background:#3274ff;animation:view-img-load .8s -0.1s ease-in-out infinite;}@keyframes view-img-load{0%{transform: translateX(-100%);}100%{transform: translateX(100%);}}@keyframes view-img-show{0%{opacity:0;}100%{opacity:1;}}</style>";return a(this).attr("view-image")||a(this).attr("rel")?void 0:(e=b?b:d,a("body").append(f+"<div class='view-img'><span>loading...</span></div>"),setTimeout(function(){var b=new Image;b.src=e,b.onload=function(){a(".view-img").html("<img src="+this.src+">")},a(".view-img").click(function(){a(".view-image-css").remove(),a(this).remove()})},c.delay),!1)})}})}(jQuery);
jQuery(document).ready(function () {
jQuery.viewImage({
'target' : '.view-image img', //需要使用ViewImage的图片
'exclude': '.exclude img', //要排除的图片
'delay' : 300 //延迟时间
});
});
'.view-image img' 将引号中的样式删掉，然后改成你文章的图片class，比如我的：
img 标签的 class 中有三个样式，我们随便选一个就行了，比如：'.aligncenter'
做完这些，ViewImage 的灯箱效果就彻底搞定了。不过由于我的主题启用了 pjax 页面加载效果，所以还需要将 ViewImage 在 pjax 中加载一次。
4.PJAX 加载
将官方给出的代码稍微修改了下，改成了简写，并且添加了名为 viewimg() 的函数。
然后在 PJAX 加载的地方，添加 viewimg()函数，让 PJAX 加载的时候加载它，做到这些，就彻底完工了。