Question

我有一个产品页面，其中包含多个图像，主框中显示了大图像，下面还有一些附加图像的缩略图。点击主图像时，Fancybox会闪光，你可以在灯箱效果中看到更大的图像。

我使用jquery交换页面上的图像，这很好用：

<script>
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('width=80&height=80','width=470&height=525'));
});
</script>

主要区域的代码：

<div class="prodrightcolumn">
    <div class="productmainimage" id="panel">
        <a id="largeLink" href="~/images/@product.Image1"  rel="gallery2" class="fancybox" title="@product.Title">
            <img id="largeImage" src="~/images/@product.Image1?width=470&height=525&mode=crop" alt="@product.Title" />
        </a>
    </div>

        <div id="thumbs">
            @if (product.image1 != ""){<div class="productsmallimage"><img src="~/images/@product.Image1?width=80&height=80&mode=crop" alt="@product.Title" /></div>}        
            @if (product.image2 != ""){<div class="productsmallimage"><img src="~/images/@product.Image2?width=80&height=80&mode=crop" alt="@product.Title" /></div>}
            @if (product.image3 != ""){<div class="productsmallimage"><img src="~/images/@product.Image3?width=80&height=80&mode=crop" alt="@product.Title" /></div>}
            @if (product.image4 != ""){<div class="productsmallimage"><img src="~/images/@product.Image4?width=80&height=80&mode=crop" alt="@product.Title" /></div>}
            @if (product.image5 != ""){<div class="productsmallimageend"><img src="~/images/@product.Image5?width=80&height=80&mode=crop" alt="@product.Title" /></div>}
        </div>
    </div>

我需要做的是更改lageLink ID中的链接，以便FancyBox打开正确的图像，而不是默认的第一张图像。我试过了：

$('#largeLink').attr('href',$(this).attr('href'));

但它没有用。我对jquery并不熟悉，所以我真的只是感觉自己的方式。我曾尝试在一些博客上阅读，但我还没有得到它，所以如果可能的话，我要么需要更多的咖啡，要么更需要帮助。

Jquery Image和使用相同变量的链接交换？

0 个答案: