var LightBox=(function(){var F=window,n=Browser.ie6,u,g,G=-1,o,w,E,v,y,M,s,m={},t=new Image(),K=new Image(),I,a,h,q,J,e,H,c,A,L,x,i,d,C;F.addEvent("domready",function(){$(document.body).adopt($$(I=new Element("div#lbOverlay",{style:"position:fixed;z-index:9999;left:0;top:0;100%;height:100%;background-color:#000;cursor:pointer;",events:{click:D}}),a=new Element("div",{style:"position:absolute;z-index:9999;overflow:hidden;background-color:#fff;"}),H=new Element("div",{style:"position:absolute;z-index:9999;overflow:hidden;background-color:#fff;font-size:12px;"})).setStyle("display","none"));h=new Element("div#lbImage",{style:"position:absolute;left:0;top:0;border:10px solid #fff;background-repeat:no-repeat;"}).inject(a).adopt(q=new Element("div",{styles:{position:"relative"}}).adopt(J=new Element("a[href=#]",{style:"display:block;position:absolute;top:0;50%;outline:none;left:0;",html:"<span id='_PrevLink' style='background-color:white;font-size:12px;color:#444;font-weight:bold;padding:2px 5px;position:absolute;top:10px;display:none;'>PREV</span>",events:{click:B,mouseenter:B1,mouseleave:B2}}),e=new Element("a[href=#]",{style:"display:block;position:absolute;top:0;50%;outline:none;right:0;",html:"<span id='_NextLink' style='background-color:white;font-size:12px;color:#444;font-weight:bold;padding:2px 5px;position:absolute;top:10px;right:0;display:none;'>NEXT</span>",events:{click:f,mouseenter:f1,mouseleave:f2}})));c=new Element("div#lbBottom",{style:"color:#666;line-height:1.4em;text-align:left;border:10px solid #fff;border-top-style:none;"}).inject(H).adopt(new Element("a[href=#]",{style:"display:block;float:right;40px;outline:none;font-weight:bold;color:#444;",html:"Close",events:{click:D}}),A=new Element("div",{style:"color:#333;"}),L=new Element("div"),new Element("div",{styles:{clear:"both"}}))});function z(){var N=F.getScroll(),O=F.getSize();$$(a,H).setStyle("left",N.x+(O.x/2));if(v){I.setStyles({left:N.x,top:N.y,O.x,height:O.y})}}function l(N){["object",n?"select":"embed"].forEach(function(P){Array.forEach(document.getElementsByTagName(P),function(Q){if(N){Q._slimbox=Q.style.visibility}Q.style.visibility=N?"hidden":Q._slimbox})});I.style.display=N?"":"none";var O=N?"addEvent":"removeEvent";F[O]("scroll",z)[O]("resize",z);document[O]("keydown",p)}function p(O){var N=O.code;return u.closeKeys.contains(N)?D():u.NextKey.contains(N)?f():u.PrevKey.contains(N)?B():false}function B(){return b(w)}function B1(){$('_PrevLink').setStyle('display','')}function B2(){$('_PrevLink').setStyle('display','none')}function f(){return b(E)}function f1(){$('_NextLink').setStyle('display','')}function f2(){$('_NextLink').setStyle('display','none')}function b(N){if(N>=0){G=N;o=g[N][0];w=(G||(u.loop?g.length:0))-1;E=((G+1)%g.length)||(u.loop?0:-1);r();a.setStyle('background','#fff url(img/loading.gif) no-repeat center');m=new Image();m.onload=k;m.src=o}return false}function k(){d.set(0);h.setStyles({backgroundImage:"url("+o+")",display:""});q.setStyle("width",m.width);$$(q,J,e).setStyle("height",m.height);A.set("html",g[G][1]||"");L.set("html",(((g.length>1)&&u.$Mess)||"").replace(/{x}/,G+1).replace(/{y}/,g.length));if(w>=0){t.src=g[w][0]}if(E>=0){K.src=g[E][0]}M=h.offsetWidth;s=h.offsetHeight;var P=Math.max(0,y-(s/2)),N=0,O;if(a.offsetHeight!=s){N=i.start({height:s,top:P})}if(a.offsetWidth!=M){N=i.start({M,marginLeft:-M/2})}O=function(){H.setStyles({M,top:P+s,marginLeft:-M/2,visibility:"hidden",display:""});d.start(1)};if(N){i.chain(O)}else{O()}}function j(){if(w>=0){J.style.display=""}if(E>=0){e.style.display=""}C.set(-c.offsetHeight).start(0);H.style.visibility=""}function r(){m.onload=null;m.src=t.src=K.src=o;i.cancel();d.cancel();C.cancel();$$(J,e,h,H).setStyle("display","none")}function D(){if(G>=0){r();G=w=E=-1;a.style.display="none";x.cancel().chain(l).start(0)}return false}Element.implement({lightbox:function(N,O){$$(this).lightbox(N,O);return this}});Elements.implement({lightbox:function(N,Q,P){Q=Q||function(R){return[R.href,R.title]};P=P||function(){return true};var O=this;O.removeEvents("click").addEvent("click",function(){var R=O.filter(P,this);return LightBox.open(R.map(Q),R.indexOf(this),N)});return O}});return{open:function(P,O,N){u=Object.append({loop:false,inO:0.8,inFadeDur:400,inSizeDur:400,inSizeTra:false,inW:250,inH:250,imageFadeDuration:400,captionAnimationDuration:400,$Mess:"Image {x}/{y}",closeKeys:[27,88,67],PrevKey:[37,80],NextKey:[39,78]},N||{});x=new Fx.Tween(I,{property:"opacity",duration:u.inFadeDur});i=new Fx.Morph(a,Object.append({duration:u.inSizeDur,link:"chain"},u.inSizeTra?{transition:u.inSizeTra}:{}));d=new Fx.Tween(h,{property:"opacity",duration:u.imageFadeDuration,onComplete:j});C=new Fx.Tween(c,{property:"margin-top",duration:u.captionAnimationDuration});if(typeof P=="string"){P=[[P,O]];O=0}y=F.getScrollTop()+(F.getHeight()/2);M=u.inW;s=u.inH;a.setStyles({top:Math.max(0,y-(s/2)),M,height:s,marginLeft:-M/2,display:""});v=n||(I.currentStyle&&(I.currentStyle.position!="fixed"));if(v){I.style.position="absolute"}x.set(0).start(u.inO);z();l(1);g=P;u.loop=u.loop&&(g.length>1);return b(O)}}})();LightBox.scanPage=function(){$$("a[rel^=lightbox]").lightbox({}, null, function(el){return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));});};
使用方法:
//多个的用法
<a rel="lightbox" title="T1" href="http://www.digitalia.be/images/25.jpg"><img src="t.jpg"></a>
window.addEvent("domready",function(){
LightBox.scanPage();
});
//单个的用法
<a rel="lightbox-atomium" title="11" href="http://www.digitalia.be/images/26.jpg"><img src="1.jpg"></a>
<a rel="lightbox-atomium" title="22" href="http://www.digitalia.be/images/27.jpg"><img src="2.jpg"></a>
$$('a.b').lightbox();
效果图:
