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");
                        });
                });
}

Reply via email to