在拇指展開的另一個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中顯示大圖像

回答

相關問題