Lightbox2 not working in v1.6.2.3

Aug 29, 2010 at 5:27 AM

I have 1.6.0.0 installed and have been using it for some time.  I use lightbox2 for my photos and galleries and it works well.  I am not using an extension I have just added the below using the settings page.

<!-- Start custom code -->
<script type="text/javascript" src="http://thenetheryfamily.com/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://thenetheryfamily.com/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://thenetheryfamily.com/lightbox/js/builder.js"></script>
<script type="text/javascript" src="http://thenetheryfamily.com/lightbox/js/lightbox.js"></script>
<link rel="StyleSheet" href="http://thenetheryfamily.com/lightbox/css/lightbox.css" type="text/css">
<!-- End custom code -->



However, when I add this to my test site with v1.6.2.3 it doesn't work at all. My set up is exactly the same on the test site only the BE version has changed.

Any thoughts?

Coordinator
Aug 29, 2010 at 9:13 AM

I took a look, and the problem appears to be because of the inclusion of jQuery in the recent builds of BE.

jQuery uses the $ alias (dollar sign), and so does Prototype (which you're using for Lightbox).  On your current 1.6 site, $ is tied to Prototype.  But on a 1.6.2.3 site, jQuery is being loaded after Prototype and taking over the $ alias (I quickly tested this on 1.6.2.3 putting your code in the site.master file).

One quick solution is to remove the jquery-1.4.1.js file from the Scripts folder (a new BE folder under the root).  By removing it, it won't get loaded.

Another option is to replace the prototype-based lightbox tool with a different one, perhaps a jQuery based one.  Probably this is a better long term option.

Aug 29, 2010 at 5:49 PM

Ben,

Thanks for the reply and effort.  I have little knowledge of JavaScript but  I have tried to follow you suggestions and found another lightbox that is jquery based. Or at least I think it is.  Here is a link: http://leandrovieira.com/projects/jquery/lightbox/

Here is the script reference:

<script type="text/javascript" src="http://thenetheryfamily.com/lightbox2/js/jquery.js"></script> 
<link rel="stylesheet" type="text/css" href="http://thenetheryfamily.com/lightbox2/css/jquery.lightbox-0.5.css" media="screen" /> 
<script type="text/javascript" src="http://thenetheryfamily.com/lightbox2/js/jquery.lightbox-0.5.js"></script> 

And just before the body close:

<script type="text/javascript"> 
$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script> 

I then removed all scripts from the scripts folder and the lightbox worked.  So, I then re-added the scripts one by one and it did fail once I put jquery-1.4.1.js back into the folder. As you can see from above lightbox reference jquery.js. So I tried just removing this reference but that did not work.  The only thing I can do is remove/rename jquery-1.4.1.js and then lightbox works.

What is dependent on jquery-1.4.1.js in BE?  What would be the risk of not having this load?  What other options are there?  could I change the $ alias for the lightbox?

Aug 30, 2010 at 3:13 AM

I partly answered my own question: What is dependent on jquery-1.4.1.js in BE?  Roles creation and management.  Anything else?

could I change the $ alias for the lightbox? so both could load and function?

Aug 30, 2010 at 3:48 AM

I have tried to change the $ alias for light box as below

<script type="text/javascript"> 
jQuery(function(foo) {
	foo('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute
}) ();
</script>

light box continues to funciton but when I put jquery-1.4.1.js back into place light box fails again.

Not sure what to do from here?

Coordinator
Aug 30, 2010 at 9:05 AM

The top script line you have is loading jQuery, which is okay, but you could also let BE load its jQuery script.  Plus, that's an older jQuery script (1.2.3).  I'm guessing this particular jQuery lightbox hasn't been updated in sometime.  I think there's a handful of jQuery lightbox plugins ... some are updated more regularly than others.

This appears to work ...

For the top part, instead of have 3 lines (2 scripts plus one CSS), only load the CSS:

<link rel="stylesheet" type="text/css" href="http://thenetheryfamily.com/lightbox2/css/jquery.lightbox-0.5.css" media="screen" /> 

Then at the bottom, before the closing </body> tag, use this instead of what you already have:

 

<script type="text/javascript">
    var loadLightboxCnt = 0;
    var setupLightboxCnt = 0;
    function setupLightbox() {
        setupLightboxCnt++;
        if (jQuery().lightBox) {
            jQuery('a[rel*=lightbox]').lightBox();
        } else if (setupLightboxCnt < 10) {
            setTimeout(setupLightbox, 100);
        }
    }
    function loadLightbox() {
        loadLightboxCnt++;
        if (typeof jQuery !== 'undefined') {

            var head = document.getElementsByTagName("head")[0];
            var lbScript = document.createElement('script');
            lbScript.type = 'text/javascript';
            lbScript.src = 'http://thenetheryfamily.com/lightbox2/js/jquery.lightbox-0.5.js';
            document.getElementsByTagName("head")[0].appendChild(lbScript);

            setupLightbox();
            
        } else if (loadLightboxCnt < 10) {
            setTimeout(loadLightbox, 100);
        }
    }
    loadLightbox();
</script> 

This will use the latest version of jQuery that BE loads.  Because BE is loading the jQuery script using the "defer" attribute, jQuery is not immediately available.  Because of this, the Lightbox script cannot load immediately -- not until after jQuery has loaded.  The script above will make a few attempts to load the Lightbox script, and then initialize the page ... giving jQuery time to load.

It's not the prettiest thing, but appears to do the job.

 

Coordinator
Aug 30, 2010 at 11:24 AM

Here's probably a better lightbox for jQuery.  I've used the older version, and it looks like he's been releasing some new versions as of late.

http://www.balupton.com/sandbox/jquery-lightbox/demo/

As the directions say, you extract the ZIP file, you put the entire folder on your site and reference the JavaScript file.  To make it easier because BE is using "defer" for it's loading of jQuery, I think it'll be easiest if you remove jquery-1.4.1.js from the Scripts folder so BE doesn't inject this script.  Then in your <head> section, add two <script> tags.  One for jquery-1.4.2.min.js (included in the lightbox download), and the 2nd one for lightbox itself (jquery.lightbox.min.js).  So it'll look like this within your head tag:

<script type="text/javascript" src="YOUR PATH..../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="YOUR PATH..../jquery.lightbox.min.js"></script>
<script type="text/javascript">
	 jQuery.Lightbox.construct({
		 "show_linkback":    false
	 });        
</script>

Also, I noticed that it will load its own CSS file -- jquery.lightbox.min.css in the "styles" folder.  The very first part of that CSS file has CSS that modifies the HTML and BODY tags.  It threw off the layout for the Standard BE theme.  You can remove the first part so it doesn't interfere with your own theme.  The part I removed was the first 42 characters....

html,body{margin:0;padding:0;height:100%;}

Aug 30, 2010 at 4:07 PM

What I hear you saying is that I need to use a jquery lightbox that use jquery-1.4.1 or higher and this is why you recommended the above.  Is that correct?

I will give the above a go and see how it works and report back later today.

BTW...what part of the world are you located?

Thanks again.

Aug 31, 2010 at 4:26 AM

Alright...got it working and without having any negative affect in the admin control panel.  I tried your above reference scripts and they did work but were a little jerky.  So I tried may others until I can across http://www.digitalia.be/software/slimbox2

This is a great script and very smooth.

Thanks for the help.