I am new to jquery, but am really excited about it. I have managed to hack together several scripts to accomplish what my designers want but have hit a wall.
I have an Image Gallery that also uses Shadowbox.js by Michael Jackson. Basically there are thumbnail which change a main image and the main image can be enlarged further using Shadowbox.js. The problem is that I can only get the initial image to work with Shadowbox.js. Once I change the main image I lose my link and I do not understand Jquery enough yet to figure out why. Here is a link for an example http://site.jpda.biz/projects/boerum-hill-house Here is the current code snip $(function() { $("#imageOptions a").click(function() { var imageSource = $(this).children("img").attr("id"); $("#loader").addClass("loading"); $("h3").remove(); showImage(imageSource); return false; }); }); function showImage(src) { $("#loader img").fadeOut("slow") .remove(); var largeImage = new Image(); $(largeImage).attr("src", src) .attr("id", "main") .load(function() { $(largeImage).hide(); $("#loader").removeClass("loading") .append(largeImage); $(largeImage).fadeIn("slow"); $("#loader img").click(function() { alert("Launch Shadowbox here"); }); }); }