在拇指展开的另一个DIV中显示大图像

Question

我有一个页面，其中包含全尺寸产品图像和4个（可能更多，也许更少）缩略图。当你滚动或点击每个缩略图（任何一个），我想全尺寸图像改变。此外，全尺寸图像应默认为第一个缩略图。

我并不确定如何做到这一点，并且会有多个产品文件夹和产品名称，但命名约定在所有方面都相似。

我猜测这将是jQuery的（这是很好的，但我是一个有点新的），但这里的情景：

<div class="fullsizeimage">show /images/products/prod_1/produ_name_1_large.jpg here by default but change as the thumbs are rolled over or clicked.</div> 

<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_1_small.jpg"></a></div> 
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_2_small.jpg"></a></div> 
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_3_small.jpg"></a></div> 
... 

下面是详细信息：

• 图片名称将为图像/产品/产品/产品/产品/产品/产品/产品/产品/产品名称/产品名称__large.jpg（400x400px），但prod_name和prod_1将为每个文件夹不同
• 可能少至1 10张缩略图。
• 希望第一个缩略图具有默认情况下已加载的对应物的缩略图。

我宁愿只使用jQuery来做到这一点，并且如果可能的话，可以重新使用适合这种模式的所有东西。

感谢您对此的任何方向！

Answer 1

我相信这将是一个有点比一些简单的jQuery更复杂，但我见过几个插件之类的东西这是非常容易使用，如http://wayfarerweb.com/jquery/plugins/simplethumbs/

Answer 2

是这样的：

<div class="fullsizeimage"> 
    <img src="/images/products/prod_1/produ_name_1_large.jpg" /> 
</div> 

<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_1_small.jpg"></a></div> 
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_2_small.jpg"></a></div> 
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_3_small.jpg"></a></div> 



$('.thumbimage a img').on('click hover',function(){ 
    $('.fullsizeimage img').attr('src',$(this).attr('src')); 
}); 

，但你必须根据这个改变你的HTML结构，你必须解析URL字符串和替换“小”与“大”

的IMG预加载你可以使用jquerys load（）处理程序。

你也可以用大的图像网址添加一个隐藏的元素和解析这样的：

<div class="thumbimage"> 
    <a href="#"><img src="images/products/prod_1/prod_name_1_small.jpg"></a> 
    <span class="url hidden">/images/products/prod_1/produ_name_1_large.jpg</span> 
</div> 

$('.thumbimage a img').on('click hover',function(){ 
    $('.fullsizeimage img').attr('src',$(this).parents('.thumbimage').find('.url').text()); 
});