单击缩略图时jQuery显示图像答案

【问题标题】：jQuery show image when thumbnail clicked单击缩略图时jQuery显示图像
【发布时间】：2011-09-30 21:51:20
【问题描述】：

大家好，我有一个包含 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>

【问题讨论】：

标签： jquery css

【解决方案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'));
    });
});

这将绑定点击，甚至在你的 moreimages 类中的任何链接上，点击选择它的 src 并更改缩放图像的 src。此代码将执行此操作，但您将需要更改图像的名称或替换它们或其他东西，因为这将在那里显示小图像。我将把它留给你，因为我现在不想搞砸它：P

【讨论】：

【解决方案2】：

我不会走 z-index 路线。导致您不应该处理的额外问题。试试这个：

$(function() {
  $('#productimagewrap a:gt(1)').hide();
  $('.moreimages a').click(function() {
    var index = $('.moreimages a').index(this);
    $('#productimagewrap a:visible').hide();
    $('#productimagewrap a:eq('+index+')').show();
  });
});

哦，请确保从您的 .moreimages 锚点中删除“ahref”属性；）

【讨论】：

这是我使用的解决方案。每个大图像都可以很好地工作，并且它周围的锚标记也需要与 jquery 缩放插件一起使用。谢谢！

【解决方案3】：

来自realshadow的答案

我试过这个，但在我看来 $(this) 是一个锚，所以没有'src'属性

为了使它工作，我使用了以下内容：

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

同样需要注意的是，您需要在“src”上进行某种“替换”以将图像名称更改为更大的名称

【讨论】：