title: Add link to swapped image
body: <p>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: <a href="http://site.jpda.biz/projects/boerum-hill-house" rel="nofollow noreferrer">http://site.jpda.biz/projects/boerum-hill-house</a> </p>
  
  <p>I think it is really simple, but I have just hit a wall with it.  TIA.</p>
  
  <pre><code>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");
                      });
              }); 
  </code></pre>
  
  <p>UPDATE 11/23</p>
  
  <p>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 <a href="http://docs.jquery.com/Manipulation/wrap" rel="nofollow noreferrer"><strong>wrap</strong></a> 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).</p>
  
  <pre><code>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 = "&lt;a rel='shadowbox' title='" + tit + "' href='/files/" + src + "'&gt;&lt;/a&gt;";
  
  $(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");
              });              
  }
  </code></pre>