图片灯箱之ViewImage

热度:334℃ 评论:3 发布时间:2017-12-31 收录:已收录

图片放大效果的灯箱插件我试过很多,比如 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,比如我的:

图片灯箱之ViewImage

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

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

4.PJAX 加载

图片灯箱之ViewImage

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

图片灯箱之ViewImage

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

最后

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

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

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

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

打赏
本文由 Mr.Wu 创作,除注明转载/出处外,均为本站原创,转载前请注明出处!

3条回应:“图片灯箱之ViewImage”

  1. 陌小雨说道:

    听说你会跳?

  2. 陌小雨说道:

    pjax的主题 确实比较叼

  3. 陌小雨说道:

    确实比较简单的图片弹窗插件 不认真看的话还以为是在新窗口打开呢,不过没有上一张下一张的功能 总的一句 适合自己的才是最好的

发表评论

电子邮件地址不会被公开。 必填项已用*标注

顶部
护眼
搜索
分享