Lightbox not working


After battling away with getting my collapsible menus working with JQUERY and help from forum members the menu effect i was after finally worked on this page -
http://www.pauserefreshment.co.uk/traditional_coffee_machine_beans_espresso.html Click on “Buy Coffee Beans” at the bottom of the left menu.

But somehow the lightbox effect which was working fine is not disabled. It was activated when on this page -
http://www.pauserefreshment.co.uk/traditional_coffee_machine_beans_espresso.html you click on the face of the guy holding up beans a lightbox effect would kick in but now its off :frowning:

If anyone anyone has any idea how to prevent me from setting my head on fire out of frustration please let me know :frowning:

Have you included the link to the lightbox.js file in the <head> section? I see it says “lightbox start” but I don’t see the link to the file. Also you are linking to js/script.js 2 x. :slight_smile:

Damn I still cant fix it :frowning:

What’s totally foxing me is that the lightbox effect works on this page (when you click on the coffee machine )-
http://www.pauserefreshment.co.uk/office_coffee_machine_darenth_style_5.html

But does not work on this page (when you click on the guy holding the beans) -
http://www.pauserefreshment.co.uk/traditional_coffee_machine_beans_espresso.html

Please could someone give me an insight into why this is the case, the only difference i can see is that Ive added the collapsible menus on one page and not the other. I cant see straight anymore and no amount of espresso’s are going to give me any more clarity…

Any insights welcome :slight_smile:

Try moving the lightbox script tag below the prototype and scriptaculous script tags.


Unfortunately the problem still persists :-(…

Thank you for all your support thus far but the light box effect remains disabled on this page (when you click on me holding out a bag of beans) -
http://www.pauserefreshment.co.uk/traditional_coffee_machine_beans_espresso.html
But mysteriously on pages where I havent added the JQUERY collapsible menu solution such as (when you click on the coffee machine) -
http://www.pauserefreshment.co.uk/traditional_coffee_machine_la_spaziale_s5.html the light box is intact.

I have a hunch that the JQUERY stuff may in some voodoo mysterious way be conflicting with the light box effect. Either way I’m not giving up so If theres anyone out there that fancies throwing a solution at this deepening conundrum I’d be eternally gratefull…

Here is the code from the head section as it stands now…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
			swfobject.registerObject("espresso", "9.0.0");
		</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){
$( '#menu > li > ul' )
	.hide()
	.click(function( e ){
		e.stopPropagation();
	});
  $('#menu > li').toggle(function(){
	  $(this).find('ul').slideDown();
  }, function(){
  	$( this ).find('ul').slideUp();
  });
});
</script>
<title>Traditional coffee machine espresso beans | pause... refreshment</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import "css/product_detail.css";
</style>
</head>

I found this on there site http://www.huddletogether.com/projects/lightbox2/#support but does it mean all i have to do is just cut and paste this into the body tag - <body onload=“MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()”>

But this didnt work but its getting close to a solution i think.

Support
It doesn’t work at all. The image opens up in a new page. What’s wrong?
This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
<body onload=“MM_preloadImages(‘/images/menu_on.gif’)…;”>
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
<body onload=“MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()”>

Just wanted to post this as someone with bigger brains might be able to tell me what i really need to do to make it work :slight_smile:

Well it looks like after applying every solution under the sun you cant have a collapsible jquery menu effect and light box 2 on the same page. Ive messed around exhaustively with the script tags in the head but it appears there is an un resolvable conflict.

Out of desperation i posted the problem on the actual light box 2 forum but no answers :frowning:

I’m still holding out hope though…

Any insights welcome…

Be aware that in jQuery (and probably similarly in the other libraries) $ () is shorthand for jQuery ().

So where there are multiple libraries, it’s safest not to use shorthands.

This might help:

You could do it with pure css? http://www.visibilityinherit.com/code/pure-css-lightbox.php

I must concede I’m very tempted to go for a CSS solution! great pictures too! As ever I am very grateful for members solutions and know I’ll get there eventually, I aint giving up! I will have a collapsible JQUERY menu and a Lightbox on the same page. Over the next few days I’ll have a crack at the aforementioned solutions and let you know how I get on :slight_smile:

Well i’m still battling away and am closer to a solution thanks to your goodself
giving me this eMail link -

So if I do the following:
add this code in the:
<script> jQuery.noConflict(); // Use jQuery via jQuery(…) jQuery(document).ready(function(){ jQuery(“div”).hide(); }); // Use Prototype with $(…), etc. $(‘someid’).hide(); </script>

But its this instruction that concerns me:
and you will need to use jQuery() instead of shorthand $() function.

Does this just mean in this bit of code -

<script type="text/javascript">$(document).ready(function(){
$( '#menu > li > ul' )
	.hide()
	.click(function( e ){
		e.stopPropagation();
	});
  $('#menu > li').toggle(function(){
	  $(this).find('ul').slideDown();
  }, function(){
  	$( this ).find('ul').slideUp();
  });
});
</script>

I need to replace every $ with a jQuery() ?

Any insights welcome :slight_smile:

As I understand it, yes, just replace $() with jQuery()… in other words, replace the dollar sign with jQuery.

It worked Ralph it worked!!! Yipeeee… thank you so much. Ive been up against a brick wall for the last three days with this one!!!

So if anyone else out there starts mixing up JQUERY with different libraries and discoveres there light box effect gets disabled after adding JQUERY collapsible menus you may as I have thanks to ralph fine the solution here:

In summary it was all about replacing $ with jQuery.
Here’s the actual code that fixed it all. Note the jQuery.noConflict bit had to added additionally then all $ replaced with jQuery to stop it getting confused with other libraries i had included!

<script>    jQuery.noConflict();    // Use jQuery via jQuery(...)    jQuery(document).ready(function(){        jQuery("div").hide();    });    // Use Prototype with $(...), etc.    $('someid').hide();  </script>
<script type="text/javascript">jQuery(document).ready(function(){
jQuery( '#menu > li > ul' )
	.hide()
	.click(function( e ){
		e.stopPropagation();
	});
  jQuery('#menu > li').toggle(function(){
	  jQuery(this).find('ul').slideDown();
  }, function(){
  	jQuery( this ).find('ul').slideUp();
  });
});
</script>

Thanks again Ralph! I Luv Sitepoint!

Glad that worked Zygoma, and thanks for taking the trouble to clarify how you resolved things. :slight_smile: