当缩略图点击时，jQuery显示图像

嘿，我有一张4张缩略图图像列表。当点击这些缩略图中的一个时，我希望它是更大的合作伙伴形象以向旁边炫耀。一次只能显示一个更大的图像。现在，我将所有4个更大的图像堆叠在一起，并在＃1图像上设置z-index，因此默认情况下它位于堆栈顶部。我认为实现这一目标的最佳方式是单击拇指时，所有图像上的z-index设置为0，合作伙伴较大的图像z-index设置为较高的数字？当缩略图点击时，jQuery显示图像

什么是最简单的方法来做到这一点通过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>

来源

2010-06-10 liquilife

我不会去z-index路线。导致你不应该处理的额外问题。从realshadow

这个我试过）

来源

2010-06-10 19:58:06 landons

这是我使用的解决方案。由于每个大图像都是精美的作品，它周围的锚标记也需要使用jQuery变焦插件。谢谢！ – liquilife 2010-06-10 20:57:08

有多种方式做到这一点。最简单的方法是保持默认的可见，然后改变其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

来源

2010-06-10 19:55:33 realshadow

哇。比我所做的更优雅。 – awshepard 2010-06-10 20:06:50

重新答案，但在我看来，

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

哦，一定要删除“AHREF”从.moreimages锚属性：试试这个是$（这）是一个锚因此不具有“SRC”属性

为了使它工作，我用下面的：

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

与您需要在'src'上进行某种“替换”以将图像名称更改为较大的图像名称相同的警告

来源

2011-09-30 13:51:20 Nat

当缩略图点击时，jQuery显示图像

回答

相关问题