sweetjaime:
Forgive me, but I am not sure what you mean by slim box? I am not following what you mean when you say "should call too"
The Slimbox code is what Zen Lightbox uses to create the lightbox effect. I don't use the IH2 code so don't know if it conflicts with MooTools core files or not....
In a nutshell, this code is not showing up in the header of your product page... ```
<script language="javascript" type="text/javascript"><!--
/*
Slimbox v1.67 - The ultimate lightweight Lightbox clone
(c) 2007-2008 Christophe Beyls <http://www.digitalia.be>
MIT-style license.
*/
var Slimbox;(function(){var E=window,n=Browser.Engine.trident4,t,g,F=-1,v,D,u,x,L,r,m={},s=new Image(),J=new Image(),H,a,h,p,I,e,G,c,z,K,w,i,d,B;E.addEvent("domready",function(){$(document.body).adopt($$(H=new Element("div",{id:"lbOverlay"}).addEvent("click",C),a=new Element("div",{id:"lbCenter"}),G=new Element("div",{id:"lbBottomContainer"})).setStyle("display","none"));h=new Element("div",{id:"lbImage"}).injectInside(a).adopt(p=new Element("div"),I=new Element("a",{id:"lbPrevLink",href:"#",title:"Previous",styles:{"background":"transparent url(includes/templates/my_site/buttons/english/zen_lightbox/prevlabel.gif) no-repeat 0 top"}}).addEvent("click",A),e=new Element("a",{id:"lbNextLink",href:"#",title:"Next",styles:{"background":"transparent url(includes/templates/my_site/buttons/english/zen_lightbox/nextlabel.gif) no-repeat 100% top"}}).addEvent("click",f));c=new Element("div",{id:"lbBottom"}).injectInside(G).adopt(new Element("a",{id:"lbCloseLink",href:"#",title:"Close",styles:{"background":"transparent url(includes/templates/my_site/buttons/english/zen_lightbox/closelabel.gif) no-repeat center"}}).addEvent("click",C),z=new Element("div",{id:"lbCaption"}),K=new Element("div",{id:"lbNumber"}),new Element("div",{styles:{clear:"both"}}))});Slimbox={open:function(O,N,M){t=$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]},M||{});w=new Fx.Tween(H,{property:"opacity",duration:t.overlayFadeDuration});i=new Fx.Morph(a,$extend({duration:t.resizeDuration,link:"chain"},t.resizeTransition?{transition:t.resizeTransition}:{}));d=new Fx.Tween(h,{property:"opacity",duration:t.imageFadeDuration,onComplete:j});B=new Fx.Tween(c,{property:"margin-top",duration:t.captionAnimationDuration});if(typeof O=="string"){O=[[O,N]];N=0}x=E.getScrollTop()+(E.getHeight()/2);L=t.initialWidth;r=t.initialHeight;a.setStyles({top:Math.max(0,x-(r/2)),width:L,height:r,marginLeft:-L/2,display:""});u=n||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(u){H.style.position="absolute"}w.set(0).start(t.overlayOpacity);y();l(1);g=O;t.loop=t.loop&&(g.length>1);return b(N)}};Element.implement({slimbox:function(M,N){$$(this).slimbox(M,N);return this}});Elements.implement({slimbox:function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;N.removeEvents("click").addEvent("click",function(){var Q=N.filter(O,this);return Slimbox.open(Q.map(P),Q.indexOf(this),M)});return N}});function y(){var M=E.getScroll(),N=E.getSize();$$(a,G).setStyle("left",M.x+(N.x/2));if(u){H.setStyles({left:M.x,top:M.y,width:N.x,height:N.y})}}function l(M){["object",n?"select":"embed"].forEach(function(O){Array.forEach(document.getElementsByTagName(O),function(P){if(M){P._slimbox=P.style.visibility}P.style.visibility=M?"hidden":P._slimbox})});H.style.display=M?"":"none";var N=M?"addEvent":"removeEvent";E[N]("scroll",y)[N]("resize",y);document[N]("keydown",o)}function o(N){var M=N.code;return t.closeKeys.contains(M)?C():t.nextKeys.contains(M)?f():t.previousKeys.contains(M)?A():false}function A(){return b(v)}function f(){return b(D)}function b(M){if(M>=0){F=M;v=(F||(t.loop?g.length:0))-1;D=((F+1)%g.length)||(t.loop?0:-1);q();a.className="lbLoading";m=new Image();m.onload=k;m.src=g[M][0]}return false}function k(){a.className="";d.set(0);h.setStyles({backgroundImage:"url("+m.src+")",display:""});p.setStyle("width",m.width);$$(p,I,e).setStyle("height",m.height);z.set("html",g[F][1]||"");K.set("html",(((g.length>1)&&t.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,g.length));if(v>=0){s.src=g[v][0]}if(D>=0){J.src=g[D][0]}L=h.offsetWidth;r=h.offsetHeight;var N=Math.max(0,x-(r/2)),M;if(a.clientHeight!=r){i.start({height:r,top:N})}if(a.clientWidth!=L){i.start({width:L,marginLeft:-L/2})}M=function(){G.setStyles({width:L,top:N+r,marginLeft:-L/2,visibility:"hidden",display:""});d.start(1)};if(i.check(M)){M()}}function j(){if(v>=0){I.style.display=""}if(D>=0){e.style.display=""}B.set(-c.offsetHeight).start(0);G.style.visibility=""}function q(){m.onload=$empty;m.src=s.src=J.src="";i.cancel();d.cancel();B.cancel();$$(I,e,h,G).setStyle("display","none")}function C(){if(F>=0){q();F=v=D=-1;a.style.display="none";w.cancel().chain(l).start(0)}return false}})();
/* Zen Lightbox v1.5 2008-12-18 */
Slimbox.scanPage = function() {
$$(document.links).filter(function(el) {
return el.rel && el.rel.test(/^lightbox/i);
}).slimbox({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]}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
};
window.addEvent("domready", Slimbox.scanPage);
//--></script>
Until this code shows up on your product page, you wont get an lightbox effect. I use Zen Lightbox on my site as will, MooTools can be used for other things.
