javascript jquery点击图片，全尺寸打开，再次点击关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19355823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery click image, open in full size, click again closes
提问by biliboc
In a html page I have <img src='img_thumb.jpg'>.
Without using any fancy jquery slider plugins I want to be able to click the above thumbnail image and the full size image to show up graying out the page content behind.
A new click on the image should close this layer and reveal the page content.
在一个 html 页面中，我有<img src='img_thumb.jpg'>. 在不使用任何花哨的 jquery 滑块插件的情况下，我希望能够单击上面的缩略图和全尺寸图像以显示后面的页面内容变灰。新单击图像应关闭此图层并显示页面内容。
回答by Jonathan
Basically you need a div to overlay the whole page and jquery (or simple javascript) to handle clicks on images like this:
基本上你需要一个 div 来覆盖整个页面和 jquery（或简单的 javascript）来处理这样的图像点击：
$("#imgSmall").click(function(){
$("#imgBig").attr("src","YOURIMAGESOURCE");
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
I made up a fiddle for your needs:
我根据您的需要编了一个小提琴：
回答by Praveen Kumar Purushothaman
If you don't wanna use any plugins, yes, you can use the simple jQuery Modal Windowtechnique by Queness. Use almost the same code, and do these changes.
如果您不想使用任何插件，是的，您可以使用Queness的简单jQuery 模态窗口技术。使用几乎相同的代码，并进行这些更改。
<a class="image-thumb" href="image.jpg">
<img src="image-thumb.jpg" alt="Image" />
</a>
And in the code, you can change this way:
在代码中，您可以这样更改：
$('a.image-thumb').click(function(e) {
Further changes for making the image to be displayed in the modal window, you can do something like this:
使图像显示在模态窗口中的进一步更改，您可以执行以下操作：
<div id="dialog" class="window">
<img src="" alt="Image" />
</div>
And you need to replace that using the JavaScript! Instead of:
您需要使用 JavaScript 替换它！代替：
$(id).fadeIn(2000);
Use this way:
使用这种方式：
$(".window").find("img").attr("src", $(this).attr("href"));
$(".window").fadeIn(2000);
There you go! :)
你去吧！:)
