jquery щелкните изображение, откройте в полном размере, нажмите снова закрывается

Question

На странице html у меня есть <img src='img_thumb.jpg'>. Без использования каких-либо фэнтезийных плагинов jQuery я хочу, чтобы иметь возможность щелкнуть выше эскиз изображения и полноразмерное изображение, чтобы отобразить содержимое страницы позади. Новый клик по изображению должен закрыть этот слой и показать содержимое страницы.

Answer 1

Если вы не хотите использовать какие-либо плагины, да, вы можете использовать простой метод jQuery Modal Window by Queness. Используйте почти тот же код и делайте эти изменения.

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