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