Zen Lightbox addon [Support Thread]

[sweetjaime]

trouble with popups...do you mean they do not show the little hover popup or that the main popup (the one that also is not working in lightbox) is the one giving you trouble.

what template are you using?

did you have any errors when installing either IH2 or lightbox?

No errors when installing either.
By popup I mean that when I click on an image, it opens large, so that the whole page is just white background, and the image, and you have to hit the back button on your browser to get back to the item description. This is rather than the larger view image popping up in a new window.
I am using the Modern Zen template.

[DarkAngel]

No errors when installing either.
By popup I mean that when I click on an image, it opens large, so that the whole page is just white background, and the image, and you have to hit the back button on your browser to get back to the item description. This is rather than the larger view image popping up in a new window.
I am using the Modern Zen template.

well shoot, and when you go to admin/tools/IH2 you see what you are supposed to see there...nothing missing or error messages....and can upload images right?

[sweetjaime]

well shoot, and when you go to admin/tools/IH2 you see what you are supposed to see there...nothing missing or error messages....and can upload images right?

Yep - thats what has got me so confused! I have been using zen cart for years, had image handler working fine on my last site. Its been a year or so since then, and now when trying to build a new one - nada!
this is the site in question shop.bella-bijou.com

[davewest]

Yep - thats what has got me so confused! I have been using zen cart for years, had image handler working fine on my last site. Its been a year or so since then, and now when trying to build a new one - nada!
this is the site in question shop.bella-bijou.com

The slimbox script is not loading into the header of your product page, thus no slimbox.

file in includes\modules\pages\document_product_info\jscript_zen_lightbox.php should call to includes\classes\zen_lightbox\autoload_default.php

The class file loads the slimbox script into the head of the product page... without the script, there is no slimbox.

That is I'm assuming you installed the newer version, older version does not have the class and loads the script from the first file.

[sweetjaime]

well shoot, and when you go to admin/tools/IH2 you see what you are supposed to see there...nothing missing or error messages....and can upload images right?

The slimbox script is not loading into the header of your product page, thus no slimbox.

file in includes\modules\pages\document_product_info\jscript_zen_lightbox.php should call to includes\classes\zen_lightbox\autoload_default.php

The class file loads the slimbox script into the head of the product page... without the script, there is no slimbox.

That is I'm assuming you installed the newer version, older version does not have the class and loads the script from the first file.

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"

[davewest]

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>

If you placed your files from the Zen_Lightbox mod in the right locations, and set 'Zen Lightbox' true in your admin configuration, then you may have a conflict with something else.

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.