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>
...

以下是详细信息：

图像名称将为images / products / prod_name / prod_name_1_small.jpg（100x100px）和images / products / prod_name / prod_name_1_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字符串并将'small'替换为'large'

对于img预加载，你可以使用jquerys load（）处理程序。

你也可以使用大的img url添加一个隐藏元素并解析它：

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

在翻转拇指上的另一个DIV中显示大图像

2 个答案: