单击缩略图时jQuery显示图像

Question

嘿所有,我有一个4个缩略图的列表.当点击其中一个缩略图时,我希望它的更大的合作伙伴形象向旁边展示.一次只能显示一个较大的图像.就像现在一样,我将所有4个较大的图像堆叠在一起,并在#1图像上设置了z-index,因此它默认位于堆栈顶部.我认为实现这一目标的最佳方法是,当点击一个拇指时,所有图像上的z-index都设置为0,而伙伴更大的图像z-index设置为更高的数字？

通过jQuery执行此操作的最简单方法是什么？我相信我能找到一些功能齐全的画廊插件来做到这一点,但这看起来有点矫枉过正,你知道吗？谢谢你的任何建议.我目前的HTML发布如下:

    <style>
#productimagewrap {
    position:absolute;
    height:350px;
    }
#productimagewrap img {
    position:absolute;
    left:0;
    top:0;
}
</style>
<div class="moreimages">
    <a ahref="#" id="productthumb1">
        <img src="/images/products/ring1-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb2">
        <img src="/images/products/ring2-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb3">
        <img src="/images/products/ring3-product_thumb.jpg" />
    </a>
    <a ahref="#" id="productthumb4">
        <img src="/images/products/ring4-product_thumb.jpg" />
    </a>
</div>


<div id="productimagewrap">
    <a href="/images/products/ring1-large.jpg" class="jqzoom" id="productimage1">
        <img src="/images/products/ring1-product.jpg" alt="Amber Ring" style="z-index:99;" />
    </a>
    <a href="/images/products/ring2-large.jpg" class="jqzoom" id="productimage2">
        <img src="/images/products/ring2-product.jpg" alt="Amber Ring" />
    </a>
    <a href="/images/products/ring3-large.jpg" class="jqzoom" id="productimage3">
        <img src="/images/products/ring3-product.jpg" alt="Amber Ring" />
    </a>
    <a href="/images/products/ring4-large.jpg" class="jqzoom" id="productimage4">
        <img src="/images/products/ring4-product.jpg" alt="Amber Ring" />
    </a>
</div>

Answer 1

有多种方法可以做到.最简单的方法是保持默认值可见,然后只更改其src属性.这将是这样做的:

<div id="productimagewrap">
    <a href="/images/products/ring1-large.jpg" class="jqzoom" id="productimage1">
        <img src="/images/products/ring1-product.jpg" alt="Amber Ring" style="z-index:99;" />
    </a>
</div>

这是默认图像,现在是jquery部分:

$('.moreimages a').each(function() {
    $(this).click(function() {
        $('#productimagewrap img').attr('src', $(this).attr('src'));
    });
});

这将绑定click甚至在你的moreimages类中的任何链接上,然后单击选择它的src并更改缩放图像的src.此代码将执行此操作,但您需要更改图像的名称或替换它们或其他内容,因为这将在那里显示小图像.我会把它留给你,因为我现在不想弄乱它:P