[jQuery] Losing link in an Image Gallery
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");
});
});
}