jQuery thumbnail replace method (Needs solution for adding A tag)
<p>I've got a thumbnail replace solution, I need to add an a tag around an img item and still have the same functionality.</p>

<p><strong>The jQuery</strong></p>

<pre><code>$(".large").click(function () {
    var thumbRel = $(this).attr("rel");
    $(this).effect("transfer", { to: $(".thumbnail img[rel='" + thumbRel + "']") }, 1000);
});

$(".thumb").click(function () {
    $(".thumbnail [class^='thumb']").removeClass("current");
    $(this).addClass("current");
    $(".large").attr("rel", $(this).attr("rel"));

    $(this).effect("transfer", { to: $(".large") }, 1000);
    $(".large").animate({ opacity: 1 }, 1000);
    $(this).queue(function () {
        $(".large").attr("src", $(this).attr("src").replace("-thumb", ""));

        $(".large").animate({ opacity: 1 }, 1000);
        $(this).dequeue();
    });
});
</code></pre>

<p>The markup is mixed with Dot Net, but here it is</p>

<pre><code>&lt;div class="product_images"&gt;        
    &lt;div class="mainImage"&gt;            
        &lt;a class="ShowProductImageDlg" href="#" onclick="ProductImagesDlgClientSide.showDialog('@Model.ProductToDisplay.Product.UrlSlug', 'Bottle'); return false;" &gt;
            &lt;img class="LargeImage" src="@Model.ProductToDisplay.Product.awsImageUrlLarge" alt="@Model.ProductToDisplay.Product.ProductName" /&gt;
        &lt;/a&gt;            
    &lt;/div&gt;
    &lt;strong&gt;Additional Images&lt;/strong&gt;
    &lt;div class="thumbnail"&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=""&gt;&lt;img class="SmallImage Bottle" src="@Model.ProductToDisplay.Product.awsImageUrlSmall" 
                    alt="@Model.ProductToDisplay.Product.ProductName" /&gt;&lt;/a&gt;&lt;/li&gt;                

            &lt;li&gt;&lt;a href=""&gt;&lt;img class="SmallImage BackLabel" src="@Model.ProductToDisplay.ProductAdditionalImageUrlSmall(awsProductImageType.BackLabel)"
                    alt="@Model.ProductToDisplay.Product.ProductName" /&gt;&lt;/a&gt;&lt;/li&gt;            
        &lt;/ul&gt;
    &lt;/div&gt;    
&lt;/div&gt;
</code></pre>

<p>The end goal, is to have the entire div that the image is in clickable (which is 90px by 90px) when the image itself is only 80x35.</p>

<p>I want to use the same jQuery.</p>
