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/

Answer 2

如果您不想使用任何插件，是的，您可以使用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);

你去吧！：）

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

2 个答案: