图片灯箱之ViewImage

摘要

图片放大效果的灯箱插件我试过很多，比如 Fancybox 、Fancyzoom、Lightbox 等等众多比较流行的，然而始终不是很喜欢。。

图片放大效果的灯箱插件我试过很多，比如 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("");  } }); });

这段代码的作用就是给文章的图片添加 a 标签，让图片支持超链接，我发的图片从来没有加过链接到媒体的功能，所以我的图片默认是没有 a 标签超链接的，之前为了使用其他灯箱效果我添加了这段代码。

而 ViewImage 是不需要 a 标签的，因此我们可以去掉这个代码了。

3.添加 ViewImage JS

将如下 JS 写入到你的 JS 末尾文件中：

/**  * 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); 

然后继续在这段 JS 下面添加如下代码：

jQuery(document).ready(function () {    jQuery.viewImage({    'target' : '.view-image img', //需要使用ViewImage的图片    'exclude': '.exclude img',    //要排除的图片    'delay'  : 300                //延迟时间      }); }); 

这段代码的作用是配置需要使用 ViewImage 效果的图片、要排除的图片、以及放大图片时的延迟时间。

下面2项基本不需要修改，关键的是需要修改'.view-image img' 将引号中的样式删掉，然后改成你文章的图片class，比如我的：

img 标签的 class 中有三个样式，我们随便选一个就行了，比如：'.aligncenter'

做完这些，ViewImage 的灯箱效果就彻底搞定了。不过由于我的主题启用了 pjax 页面加载效果，所以还需要将 ViewImage 在 pjax 中加载一次。

4.PJAX 加载

将官方给出的代码稍微修改了下，改成了简写，并且添加了名为 viewimg() 的函数。

然后在 PJAX 加载的地方，添加 viewimg()函数，让 PJAX 加载的时候加载它，做到这些，就彻底完工了。

最后

你问我为什么喜欢 ViewImage ？ 理由很简单，极简的代码 + 简洁的显示样式 + 简单的配置套入方式

代码 Gzip 后不足 1kb ，放大后没有那些花俏的东西，虽然显示样式其他插件也完全可以修改代码改动，但是原生态的最美。

配置引入方式也很简单，正如本文，只需要添加 几行JS，修改一下其中一个配置就OK了，难道还有比这个更简单的吗？

至于具体的效果，可以点击本文的图片，查看。