Zen Lightbox addon [Support Thread]

[aozhaver]

The two files need to be deleted... zen_lightbox_mootools_default.js and zen_lightbox_mootools_custom.js

both are the older versions of mootools and not needed once you place the mootools 1.3 into the folder.

One thing... I use mootools for other things... like my sidebox menu... thous the jscript_mootools.js naming. One advantage to this, lightbox can work across the site by just adding the rel="lightbox" to a image link. If your not using it across the site, then replacing one of the two files would work too...

Dave GOD BLESS YOU for helping on this thread but I cant understand your English or your meaning... Can anyone translate for me what Dave is saying????

I DELETED the two older zen_lightbox mootools files and replaced just with ONE mootoos file... it doesnt work...

Why should it work! the top of Daves own Slimbox.php says

{ echo 'zen_lightbox_mootools_custom'; } else { echo 'zen_lightbox_mootools_default'; } echo '.js"></script>'; 

So OBVIOUSLY the zen_lightbox is calling up those specific files.

PLEASE CAN ANYBODY THAT HAS THIS WORKING ON THE LATEST CHROME POST ACTUAL COPIES OF THE J-SCRIPT FILES HE USES WITH ZEN_LIGHTBOX AND A COPY OF HIS SLIMBOX.PHP FILE

Daves ones dont work and I aint a programmer.....FILES FIX PLEASE!!!!

[aozhaver]

Ok,

I tried the other method using Slimbox 2.0 but only had partial success. Now the lightbox effect works in all browsers including chrome but it no longer displays the "close" link at the bottom or the "next"/"previous" at the top.

I suspect this maybe a CSS issue ill continue testing.

In the meantime allow me to elaborate on what I did.

I left all the files in my jscript folder INTACT, all the old mootools files zen lightbox uses and calls up from slimbox.php file.

What I did change however is the slimbox code inside the slimbox.php file and the result looks like this:

<?php
/**
 * Zen Lightbox
 *
 * @author Alex Clarke (aclarke@ansellandclarke.co.uk)
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: slimbox.php 2008-12-15 aclarke $
 */

echo '<script type="text/javascript" src="' . $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/'; if (ZEN_LIGHTBOX_TRANSITION_EFFECT != 'false') { echo 'zen_lightbox_mootools_custom'; } else { echo 'zen_lightbox_mootools_default'; } echo '.js"></script>';
?>

<script language="javascript" type="text/javascript"><!--
/*
    Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery
    (c) 2007-2010 Christophe Beyls <http://www.digitalia.be>
    MIT-style license.
*/
(function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery);

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    jQuery(function($) {
        $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });
    });
}

If I still go ahead and remove the mootools files from the jscript folder it stops working. So although the new slimbox uses the jquery library, Zen Lightbox still seems to need and require the old mootools files. Needless to say Dave's fix didnt work for me, the great mage speaks in cryptic tones not decipherable by a dummy like me. Dave write us dummies a proper step by step post explaining the "obvious" and including some files pleeeez

[aozhaver]

OK, God forbid anyone should post here a PROPER solution to help others with the new chrome issue so after fiddling for 2 days I bring you here the proper working fully tested solution *no fiddling required*.

Get this file ZEN_LIGHTBOX_FIX.zip

Upload to the following locations and replace existing files:

Replace slimbox.php in your
.../includes/classes/zen_lightbox
With the new slimbox.php file included in my ZIP

Replace stylesheet_zen_lightbox.css in your
.../includes/templates/YOUR_TEMPLATE/css
with the new stylesheet_zen_lightbox.css file included in my ZIP

copy the GIFS (photo) files to your
.../includes/templates/YOUR_TEMPLATE/images

THATS IT!!!

DONT TOUCH your JScript folder files!! - leave that for the wisecracks...

The only reason that this thread isnt FLOODED with people having this problem is simply because most haven't updated their chrome version.

Even I by total chance had to uninstall chrome and reinstall a new version to resolve unrelated issues and then my woes started with lightbox.

GOOD LUCK!!

[guitarstore]

Hello.

I have done the updates and works fine in chrome and firefox. However it no longer works in Internet Explorer 8.

Any advise?

Thanks...

[aozhaver]

Ive tried it on IE and it works fine....

It's strange since the whole issue was to do with chrome, IE and firefox even work without the fix...

I would say clear your cache and try again.

Did you always have the issue with IE or only after the fix?

[guitarstore]

Hello.

I actually did the previous update which is the one that I had problems in IE8. I just tried the update you posted and I can't get that to work in any browser

[aozhaver]

Did you keep a backup of your files before any fix was applied?

Please restore your files as before to the situation where basically everything works except on chrome.

Then apply my fix only and let me know how it goes,

cheers

[guitarstore]

Yes, I did do that but the pictures still come up not in a light box but in a new window

[aozhaver]

I was getting that as well, for a while... can you give me ftp access to inspect your files? its very hard to guess like this but I assure you everything should work right if you have only the original Zen Lightbox 1.5 files and then apply my fix only,

PM me

[aussiesapphire]

OK, God forbid anyone should post here a PROPER solution to help others with the new chrome issue so after fiddling for 2 days I bring you here the proper working fully tested solution *no fiddling required*.

Get this file ZEN_LIGHTBOX_FIX.zip


GOOD LUCK!!

This solution did not work for me. Have the old files so I can easily revert but when I followed your instructions, it opens each image file in a window by itself not as the lightbox effect - is doing this on both Chrome and IE (didnt check FF but presume same).

Any ideas on this?? Any suggestion gratefully received.

cheers
Leah