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