Question

I’ve got a thumbnail replace solution, I need to add an a tag around an img item and still have the same functionality.

The jQuery

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

The markup is mixed with Dot Net, but here it is

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

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

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 80×35.

I want to use the same jQuery.

Answer 1

You can do this like that (see jsfiddle as a proof):

var link = jQuery('<a>', {
    'href': 'http://www.google.com/',
    'title': 'Dynamically generated link'
});

jQuery('img').wrap(link);

Basically you first create a link (<a> element) and then wrap it around the images selected by the img selector (you can adjust it to your needs).