tags:

views:

134

answers:

1

I have an image gallery that is swapping images and I want to link the swapped image to come up even larger in a shadowbox/lightbox. I am close, I am having a brainfreeze on how to add the link. It would go where I have the alert box popping right now. Here is the page if you want to see it so far: http://site.jpda.biz/projects/boerum-hill-house

I think it is really simple, but I have just hit a wall with it. TIA.

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

UPDATE 11/23

Based on Tricks response I was able to find a nice way to correct the problem I was having. I started with his solution (build a new DIV) and that led me to the wrap function which I am now using. I was able to use the wrap function and not have to build a whole DIV. Here is my updated code (includes the ability to pass in a title for the link).

function showImage(src,tit)
{
$("#loader img").fadeOut("slow")
            .remove();
$("#loader a").remove();


var largeImage = new Image();
var largePath = "/files/imagecache/project_large/" + src;
var largeLink = "<a rel='shadowbox' title='" + tit + "' href='/files/" + src + "'></a>";

$(largeImage).attr("src", largePath)
     .attr("id", "main")
     .attr("border", "0")
         .load(function()
            {           
            $(largeImage).hide();

            $("#loader").removeClass("loading")
                    .append(largeImage);
            $("#main").wrap(largeLink);
            $(largeImage).fadeIn("slow");
            });              
}
+1  A: 

What you want to do is actually swap divs instead of just img tags, and have the div generated with link around the image that it is going to swap into.

Trick Jarrett