jQuery kills Lightbox

Question

I just moved my javascript over to jQuery for the simple AJAX functions. However I'm trying to use a lightbox plugin with jQuery since I want to keep the same functionality but don't want to include 10 different libraries. If i remove the jquery include and keep lightbox, it works great if i put it back it breaks, it just brings up the full size image instead of the box, neither chrome or firefox's console complains about anything, it just goes straight to the image I tried 5 different lightbox clones/plugins for jQuery but they all gave me the same behavior, which leads me to think there's something i'm missing

right now my headers look like this (double checked, they're all there):

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/thickbox.js'></script>
<link rel='stylesheet' type='text/css' href='css/thickbox.css' />

and my gallery (php):

foreach(...){
echo "<a href=\"$path\" class='thickbox' rel='$folder'><img border=none src=\"$thumb\" /></a>&nbsp;\n" ;
}

for the background, the images in the foreach are loaded from an ajax call, but this was never a problem with lightbox, it shouldn't be because all the html is there anyway

Answer 1

This is usually because other libraries (not jQuery) also try to use the dollar sign variable name.

There's a setting in jQuery to turn on compatibility mode which will force you to use jQuery() instead of $() to make jQuery calls.

Answer 2

Just a thought... doesn't LightBox attempt to include it's own copy of jQuery or something similar? IIRC, that might be the cause of your issues...

Answer 3

Try looking at Shadowbox. It has the same kind of effect but has not had issues with JQuery for me. They also have a very similar set up and are pretty easy to switch between.

Answer 4

You could also use the jQuery Lightbox Plugin

Answer 5

You can find different ways to resolve conflict here: Using_jQuery_with_Other_Libraries