jquery单击图像,以完整大小打开,再次单击关闭

Question

在我有一个HTML页面<img src='img_thumb.jpg'>.如果不使用任何花哨的jquery滑块插件,我希望能够单击上面的缩略图图像和全尺寸图像,以显示灰色背后的页面内容.对图像的新单击应关闭此图层并显示页面内容.

Answer 1

基本上你需要一个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/