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

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

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

我猜测这将是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来做到这一点，并且如果可能的话，可以重新使用适合这种模式的所有东西。

感谢您对此的任何方向！

来源

2012-03-23 Chris Cummings

首先，你应该使用class =“thumbimage” – JensT 2012-03-23 17:41:42

你是对的，对不起，编辑。 – 2012-03-23 17:42:25

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

来源

2012-03-23 17:46:14

我认为在这个页面上的第一个例子将做我所需要的。我需要添加/修改的唯一方法就是让它在悬停状态下工作。谢谢！ – 2012-03-23 18:23:26

有时需要第三个动作：放大图像 – 2012-10-08 08:04:55

是这样的：

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

来源

2012-03-23 17:45:09 JensT

如果你正在使用jquery 1.7以下使用delegate（）而不是on（） – JensT 2012-03-23 17:53:01

这只是让全尺寸img拇指是不是？ – mikevoermans 2012-03-23 17:54:04

是的，如上所述，你必须解析url字符串，并用'large'代替'small' – JensT 2012-03-23 17:58:51

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

回答

相关问题