Блог

У меня есть решение для замены миниатюр, мне нужно добавить тег a вокруг элемента img и сохранить ту же функциональность.

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

Разметка смешана с точечной сетью, но вот она

 <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>
 

Конечная цель — иметь весь div, в котором изображение доступно для кликабельности (размером 90 на 90 пикселей), когда само изображение имеет размер всего 80×35.

Я хочу использовать тот же jQuery.

Вы можете сделать это так (см. jsfiddle в качестве доказательства):

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

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

По сути, вы сначала создаете ссылку ( <a> элемент), а затем обертываете ее вокруг изображений, выбранных img селектором (вы можете настроить его в соответствии с вашими потребностями).