J'ai testé le code suivant sous ie, firefox, chrome et opera:

Sous IE: il marche dans tout les cas!
Sous firefox, chrome et opera il ne pas toujours, dès fois seulement.

Code javascript:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
/*
	Slimbox v1.54 - The ultimate lightweight Lightbox clone
	(c) 2007-2008 Christophe Beyls <http://www.digitalia.be>
	MIT-style license.
*/
var Slimbox;(function(){var C=window,K=0,r,g,D,t,B,s,v,J,p,k=o.bindWithEvent(),n,q=new Image(),H=new Image(),F,a,h,G,e,E,c,x,I,u,i,d,z;C.addEvent("domready",function(){$(document.body).adopt($$(F=new Element("div",{id:"lbOverlay"}),a=new Element("div",{id:"lbCenter"}),E=new Element("div",{id:"lbBottomContainer"})).setStyle("display","none"));h=new Element("div",{id:"lbImage"}).injectInside(a).adopt(G=new Element("a",{id:"lbPrevLink",href:"#"}),e=new Element("a",{id:"lbNextLink",href:"#"}));G.onclick=y;e.onclick=f;var L;c=new Element("div",{id:"lbBottom"}).injectInside(E).adopt(L=new Element("a",{id:"lbCloseLink",href:"#"}),x=new Element("div",{id:"lbCaption"}),I=new Element("div",{id:"lbNumber"}),new Element("div",{styles:{clear:"both"}}));L.onclick=F.onclick=A});Slimbox={open:function(N,M,L){r=$extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeTransition:false,initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},L||{});u=F.effect("opacity",{duration:r.overlayFadeDuration});i=a.effects($extend({duration:r.resizeDuration},r.resizeTransition?{transition:r.resizeTransition}:{}));d=h.effect("opacity",{duration:r.imageFadeDuration,onComplete:j});z=c.effect("margin-top",{duration:r.captionAnimationDuration});if(typeof N=="string"){N=[[N,M]];M=0}v=C.getScrollTop()+(C.getHeight()/2);J=r.initialWidth;p=r.initialHeight;a.setStyles({top:Math.max(0,v-(p/2)),width:J,height:p,marginLeft:-J/2,display:""});s=C.ie6||(F.currentStyle&&(F.currentStyle.position!="fixed"));if(s){F.style.position="absolute"}u.set(0).start(r.overlayOpacity);w();m(true);K=1;g=N;r.loop=r.loop&&(g.length>1);return b(M)}};Element.extend({slimbox:function(L,M){$$(this).slimbox(L,M);return this}});Elements.extend({slimbox:function(L,O,N){O=O||function(P){return[P.href,P.title]};N=N||function(){return true};var M=this;M.forEach(function(P){P.removeEvents("click").addEvent("click",function(Q){var R=M.filter(N,this);Slimbox.open(R.map(O),R.indexOf(this),L);Q.stop()}.bindWithEvent(P))});return M}});function w(){var M=C.getScrollLeft(),L=C.getWidth();$$(a,E).setStyle("left",M+(L/2));if(s){F.setStyles({left:M,top:C.getScrollTop(),width:L,height:C.getHeight()})}}function m(L){["object",C.ie?"select":"embed"].forEach(function(N){$each(document.getElementsByTagName(N),function(O){if(L){O._slimbox=O.style.visibility}O.style.visibility=L?"hidden":O._slimbox})});F.style.display=L?"":"none";var M=L?"addEvent":"removeEvent";C[M]("scroll",w)[M]("resize",w);document[M]("keydown",k)}function o(M){var L=M.code;if(r.closeKeys.contains(L)){A()}else{if(r.nextKeys.contains(L)){f()}else{if(r.previousKeys.contains(L)){y()}}}M.stop()}function y(){return b(t)}function f(){return b(B)}function b(L){if((K==1)&&(L>=0)){K=2;D=L;t=(D||(r.loop?g.length:0))-1;B=((D+1)%g.length)||(r.loop?0:-1);z.stop();$$(G,e,h,E).setStyle("display","none");a.className="lbLoading";n=new Image();n.onload=l;n.src=g[L][0]}return false}function l(){a.className="";d.set(0);h.setStyles({width:n.width,backgroundImage:"url("+g[D][0]+")",display:""});$$(h,G,e).setStyle("height",n.height);x.setHTML(g[D][1]||"");I.setHTML((((g.length>1)&&r.counterText)||"").replace(/{x}/,D+1).replace(/{y}/,g.length));if(t>=0){q.src=g[t][0]}if(B>=0){H.src=g[B][0]}J=h.offsetWidth;p=h.offsetHeight;var L=Math.max(0,v-(p/2));if(a.clientHeight!=p){i.chain(i.start.pass({height:p,top:L},i))}if(a.clientWidth!=J){i.chain(i.start.pass({width:J,marginLeft:-J/2},i))}i.chain(function(){E.setStyles({width:J,top:L+p,marginLeft:-J/2,visibility:"hidden",display:""});d.start(1)});i.callChain()}function j(){if(t>=0){G.style.display=""}if(B>=0){e.style.display=""}z.set(-c.offsetHeight).start(0);E.style.visibility="";K=1}function A(){if(K){K=0;n.onload=Class.empty;i.clearChain();[u,i,d,z].forEach(function(L){L.stop()});$$(a,E).setStyle("display","none");u.chain(m).start(0)}return false}})();
 
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
Slimbox.scanPage = function() {
	$$($$(document.links).filter(function(el) {
		return el.rel && el.rel.test(/^lightbox/i);
	})).slimbox({/* Put custom options here */}, null, function(el) {
		return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
	});
};
window.addEvent("domready", Slimbox.scanPage);

Code CSS:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
/* SLIMBOX */
 
#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(loading.gif) no-repeat center;
}
 
#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px 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(prevlabel.gif) no-repeat 0% 15%;
}
 
#lbNextLink {
	right: 0;
}
 
#lbNextLink:hover {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}
 
#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}
 
#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}
 
#lbCaption, #lbNumber {
	margin-right: 71px;
}
 
#lbCaption {
	font-weight: bold;
}

NB: Il peut y avoir des erreures de transmission de variable entre autres dans mon code php
Merci