折腾果然永无止境,对于可有可无的图片灯箱效果要不要上其实纠结了好久,也许是最近想不到什么可折腾的,同时又觉得博客虽然够简洁但是略显单调。才最终决定加点功能上去......其实这已经背离了我打算重回博客的初衷,当时只是想着随便搞个极其简单的主题,然后试着安心写写生活方面的日志。但是主题一折腾起来,经常是解决一个想法,紧接着又一个想法油然而生,有种刹不住车的节奏......


图片灯箱效果实现起来倒是不复杂,毕竟借助搜索引擎一搜一大把,但是挑选一个自己中意点的就有点费时间,图片灯箱代码找了好几个大部分觉得代码量实在太大,功能也略显复杂,总觉得为实现这么点功能,可能会造成拖慢网站打开速度就有点得不偿失了。因此耗时不少最终挑选了 slimbox2,代码量相对不多,效果也可以接受。图片灯箱效果既然已经启用就又多了项任务......平时生活中其实很少拍照,看来经后需要留意下身边美好的事物保存下来了。


鉴于自己折腾博客总是反复无常,为了以后博客关闭再重新搞起时少做一些无用功这里简单记录下 slimbox2 灯箱的实现过程:
1.将如下 js 代码放入主题 js 文件中:

(function(j){var i=j(window),h,p,c=-1,d,w,z,g,H,x,o,l=!window.XMLHttpRequest,s=[],F=document.documentElement,q={},m=new Image(),n=new Image(),D,E,t,b,k,C;j(function(){j("body").append(j([D=j('<div id="lbOverlay" />').click(r)[0],E=j('<div id="lbCenter" />')[0]]).css("display","none"));t=j('<div id="lbImage" />').appendTo(E).append(b=j('<div style="position: relative;" />').append([k=j('<a id="lbPrevLink" href="#" />').click(e)[0],C=j('<a id="lbNextLink" href="#" />').click(v)[0]])[0])[0]});j.slimbox=function(K,J,I){h=j.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},I);if(typeof K=="string"){K=[[K,J]];J=0}H=i.scrollTop()+(i.height()/2);x=h.initialWidth;o=h.initialHeight;j(E).css({top:Math.max(0,H-(o/2)),width:x,height:o,marginLeft:-x/2}).show();g=l||(D.currentStyle&&(D.currentStyle.position!="fixed"));if(g){D.style.position="absolute"}j(D).css("opacity",h.overlayOpacity).fadeIn(h.overlayFadeDuration);G();u(1);p=K;h.loop=h.loop&&(p.length>1);return A(J)};j.fn.slimbox=function(I,L,K){L=L||function(M){return[M.href,M.title]};K=K||function(){return true};var J=this;return J.unbind("click").click(function(){var O=this,Q=0,P,M=0,N;P=j.grep(J,function(S,R){return K.call(O,S,R)});for(N=P.length;M<N;++M){if(P[M]==O){Q=M}P[M]=L(P[M],M)}return j.slimbox(P,Q,I)})};function G(){var J=i.scrollLeft(),I=i.width();j([E]).css("left",J+(I/2));if(g){j(D).css({left:J,top:i.scrollTop(),width:I,height:i.height()})}}function u(I){if(I){j("object").add(l?"select":"embed").each(function(K,L){s[K]=[L,L.style.visibility];L.style.visibility="hidden"})}else{j.each(s,function(K,L){L[0].style.visibility=L[1]});s=[]}var J=I?"bind":"unbind";i[J]("scroll resize",G);j(document)[J]("keydown",B)}function B(K){var J=K.which,I=j.inArray;return(I(J,h.closeKeys)>=0)?r():(I(J,h.nextKeys)>=0)?v():(I(J,h.previousKeys)>=0)?e():null}function e(){return A(w)}function v(){return A(z)}function A(I){if(I>=0){c=I;d=p[c][0];w=(c||(h.loop?p.length:0))-1;z=((c+1)%p.length)||(h.loop?0:-1);y();E.className="lbLoading";q=new Image();q.onload=f;q.src=d}return false}function f(){E.className="";j(t).css({backgroundImage:"url("+d+")",visibility:"hidden",display:"","background-size":"100%"});var L=q.width,I=q.height,J=i.width(),K=i.height();if(L>=J||I>=K){if(J>=K){j(b).width(K*0.8*L/I);j([b,k,C]).height(K*0.8)}else{j(b).width(J*0.8);j([b,k,C]).height(J*0.8*I/L)}}else{j(b).width(q.width);j([b,k,C]).height(q.height)}if(w>=0){m.src=p[w][0]}if(z>=0){n.src=p[z][0]}x=t.offsetWidth;o=t.offsetHeight;var M=Math.max(0,H-(o/2));if(E.offsetHeight!=o){j(E).animate({height:o,top:M},h.resizeDuration,h.resizeEasing)}if(E.offsetWidth!=x){j(E).animate({width:x,marginLeft:-x/2},h.resizeDuration,h.resizeEasing)}j(E).queue(function(){j(t).css({display:"none",visibility:"",opacity:""}).fadeIn(h.imageFadeDuration,a)})}function a(){if(w>=0){j(k).show()}if(z>=0){j(C).show()}}function y(){q.onload=null;q.src=m.src=n.src=d;j([E,t]).stop(true);j([k,C,t]).hide()}function r(){if(c>=0){y();c=w=z=-1;j(E).hide();j(D).stop().fadeOut(h.overlayFadeDuration,u)}return false}})(jQuery);
//适用范围需自行调整
jQuery(document).ready(function($){$("a[rel!=link]:has(img)").slimbox();});

上述代码中最后一句是只要是带有 a 标签且有图片,则启用图片灯箱,请根据实际情况调整。
2.将如下 css 代码加入主题 style.css 文件中:

#lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}
#lbCenter, #lbBottomContainer{position:absolute;z-index: 9999;overflow: hidden;background-color:#fff;}
.lbLoading{background:#fff url(images/loading.gif) no-repeat center;}
#lbImage {position:absolute;left:0;top:0;border:6px solid #fff;background-repeat:no-repeat;}
#lbPrevLink,#lbNextLink{display: block;position: absolute;top:0;width:50%;outline:none;}
#lbPrevLink{left:0;}
#lbPrevLink:hover{background:transparent url(images/prevlabel.gif) no-repeat 0 15%;}
#lbNextLink{right:0;}
#lbNextLink:hover{background:transparent url(images/nextlabel.gif) no-repeat 100% 15%;}

CSS 代码内引用的图片请自行寻找放入指定目录。

  1. Yuki
    Yuki 2018-01-05 11:53 am回复

    你那两位小情人就是最好的风景,哈哈~

    1. 沉沦
      沉沦 2018-01-05 12:19 pm回复

      ......原来是你啊!有好久不联系了,最近怎么样?

      1. Yuki
        Yuki 2018-01-05 05:33 pm回复

        前几个月不忙,元月份很忙了,白天几乎没时间玩手机了,想想过不了多久可以回家了开心

  2. sys
    sys 2018-01-05 02:00 pm回复

    为了以后博客关闭再重新搞起..

    这刚开了两天就想关闭了,哈哈哈

    1. 沉沦
      沉沦 2018-01-05 02:13 pm回复

      哈哈!希望不会有那一天...

  3. 从良未遂
    从良未遂 2018-01-05 06:26 pm回复

    请教一下,我博客右侧放了一张图片,利用的是自带的图像小工具,要想实现点击放大而不是跳转到图片链接应该怎么设置?
    我的主题有灯箱效果的:https://www.ithmz.com/sunshine.html

    1. 沉沦
      沉沦 2018-01-05 06:44 pm回复

      呃,家里没电脑,无法审查你的网站,其实我不懂代码,感觉你主题有图片灯箱的话,只能给你个思路,要是我我就审查这张图片的 css 及 html 结构,然后与你有灯箱效果的图片坐下对比,看看有灯箱效果的图片是如果与灯箱 js 代码关联的。然后再看看灯箱 js 代码中长得像 css 代码,慢慢对比,应该能搞定。

© 2018 Socode