Zen Lightbox addon [Support Thread]

[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.

[eggmedia]

I am using Cherry Zen and the latest version of ZenCart for my store at http://williamsstore.com/market Lightbox works fine for second or later images, but the first one still displays as a regular pop-up box. Any suggestions are appreciated!

[DarkAngel]

I am using Cherry Zen and the latest version of ZenCart for my store at http://williamsstore.com/market Lightbox works fine for second or later images, but the first one still displays as a regular pop-up box. Any suggestions are appreciated!

by the looks of it you have both IH2 and lightbox installed...yet I see no pop up image when viewing the small ones and each one i clicked on gave me NO lightbox effect at all.

are you sure you uploaded the files to the correct places?

[brimsjewelry]

Hi,

Using Zen Cart 1.3.8 and would like to install Zen Lightbox. When I run the install script by pasting the script in the box and clicking run I get the following error:

1146 Table 'selectge_znc1.configuration_group' doesn't exist
in:
[SELECT @cgi := configuration_group_id FROM configuration_group WHERE configuration_group_title = 'Zen Lightbox';]

Consequently Lightbox does not work. Can anyone tell me what I need to to?

thanks,

Jason

[DarkAngel]

Hi,

Using Zen Cart 1.3.8 and would like to install Zen Lightbox. When I run the install script by pasting the script in the box and clicking run I get the following error:

1146 Table 'selectge_znc1.configuration_group' doesn't exist
in:
[SELECT @cgi := configuration_group_id FROM configuration_group WHERE configuration_group_title = 'Zen Lightbox';]

Consequently Lightbox does not work. Can anyone tell me what I need to to?

thanks,

Jason

please go to the database in myadminphp and look at the tables. make sure that the prefix is: selectge_znc1

NOT the databases name but the prefix just before each and every individual table there...send a screenshot of the database tables please.

[bimo_in_bali]

Hi, anyone can help me?
After installing Zen Light box, my image in 'product info' expanding down and creating a wider space between image and 'large image text'.

I don't know if it's normal?
or how to modify this, so that the 'larger image"text within a right spot and the shadow of image is around image without extra space.

Thanks in advance
Bimo

[DarkAngel]

I agree with each and every conversation regarding Zen Cart techniques.Cool contribution. But one more question - I saw next and previous buttons in images folder. Will they be implemented in the next version to browse through all images of the product?I want to know some more consideration regarding product.

those are for the gallery mode of lightbox. when the larger image is viewed and if there are additional images then the person can click the next or prev buttons to see the others...mine has never worked, not even with image handler...lol