如何通過點擊縮略圖顯示/隱藏大圖像？

Question

如何通過單擊縮略圖顯示/隱藏大圖像？

我需要這樣的

用的jsfiddle嘗試這裏http://jsfiddle.net/jitendravyas/Qhdaz/

是否有可能只用CSS。如果沒有，那麼jQuery解決方案是可以的。

使用<a href=#">即使沒有在同一個標​​籤或新標籤中打開任何新頁面也不錯。

編輯：

我忘了補充。它應該在iPad上工作太

Answer 1

見這個例子：

沒有預裝

HTML：

<div id="big-image"> 
    <img src="http://lorempixel.com/400/200/sports/1/"> 
</div> 

<div class="small-images"> 
    <a href="http://lorempixel.com/400/200/sports/1/"><img src="http://lorempixel.com/100/50/sports/1/"></a> 
<a href="http://lorempixel.com/400/200/fashion/1/" class=""><img src="http://lorempixel.com/100/50/fashion/1/"></a> 
<a href="http://lorempixel.com/400/200/city/1/"><img src="http://lorempixel.com/100/50/city/1/"></a> 
</div> 

的Javascript（jQuery的）

$(function(){ 
    $(".small-images a").click(function(e){ 
     var href = $(this).attr("href"); 
     $("#big-image img").attr("src", href); 
     e.preventDefault(); 
     return false; 
    }); 
}); 

目前僅1大圖像，w當點擊A時，A的href被複製爲大圖像的SRC。

活生生的例子：http://jsfiddle.net/Qhdaz/1/

如果你wan't做沒有額外DOM進步，可以加3倍大的圖像，並直接加載它們。上述解決方案不會預載圖像，下面的功能會。

堆載預壓

HTML：

<div id="big-image"> 
    <img src="http://lorempixel.com/400/200/sports/1/"> 
    <img src="http://lorempixel.com/400/200/fashion/1/"> 
    <img src="http://lorempixel.com/400/200/city/1/"> 
</div> 

<div class="small-images"> 
    <img src="http://lorempixel.com/100/50/sports/1/"> 
    <img src="http://lorempixel.com/100/50/fashion/1/"> 
    <img src="http://lorempixel.com/100/50/city/1/"> 
</div> 

的Javascript：

$(function(){ 
    $("#big-image img:eq(0)").nextAll().hide(); 
    $(".small-images img").click(function(e){ 
     var index = $(this).index(); 
     $("#big-image img").eq(index).show().siblings().hide(); 
    }); 
}); 

http://jsfiddle.net/Qhdaz/2/