jquery點擊圖片，完全尺寸，再次點擊關閉

Question

在一個html頁面我有<img src='img_thumb.jpg'>。 如果不使用任何花哨的jQuery滑塊插件，我希望能夠點擊上面的縮略圖圖像和全尺寸圖像來顯示灰色背後的頁面內容。 圖像上的新點擊應關閉此圖層並顯示頁面內容。

Answer 1

如果你不想使用任何插件，是的，你可以使用Queness簡單的jQuery Modal Window技術。使用幾乎相同的代碼，並執行這些更改。

<a class="image-thumb" href="image.jpg"> 
    <img src="image-thumb.jpg" alt="Image" /> 
</a> 

並在代碼，你可以改變這種方式：

$('a.image-thumb').click(function(e) { 

爲使圖像進一步改變在模態窗口中顯示，你可以做這樣的事情：

<div id="dialog" class="window"> 
    <img src="" alt="Image" /> 
</div> 

而且您需要使用JavaScript代替！相反的：

$(id).fadeIn(2000); 

用這樣的方式：

$(".window").find("img").attr("src", $(this).attr("href")); 
$(".window").fadeIn(2000); 

你去那裏！ :)

Answer 2

基本上你需要一個div來覆蓋整個頁面和jQuery（或簡單的JavaScript）來處理點擊了相似圖片：

$("#imgSmall").click(function(){ 
    $("#imgBig").attr("src","YOURIMAGESOURCE"); 
    $("#overlay").show(); 
    $("#overlayContent").show(); 
}); 

$("#imgBig").click(function(){ 
    $("#imgBig").attr("src", ""); 
    $("#overlay").hide(); 
    $("#overlayContent").hide(); 
}); 

我編了一個搗鼓你的需求：

http://jsfiddle.net/a8c9P/