2

英语不是我的母语，所以请耐心等待。

我试图做到这一点，以便当用户单击我网站上的任何图像时，一个画廊类型的 div 将变得可见，其中包含最大尺寸的图像。

我现在的做法是；

    var image = $("body > image");


image.on('click', function(){
    var imageURL = $(this).attr('src');
    backgroundCurtain.css({"display": "block"});
    imageResized.attr("src", imageURL);
    var imageWidth = imageResized.width();
    pictureInner.css({"width" : imageWidth});
});

这不起作用，老实说，我没想到它会起作用。我该如何称呼它，以便正文中的每个图像元素。我如何“调用”体内的每个图像？

4

3 回答 3

4

要使用 jquery 引用所有图像，只需执行

var images = $("img");

但是，通常您不希望将其应用于所有图像（例如 imageResized 不应该在此集中）。一个好的解决方案是添加一个 css 类（例如class="zoomable"）到您想要可缩放的元素并使用此选择器：

var images = $("img.zoomable");

看看这个参考。

请注意，大多数情况下，我们不会为更大的图像使用相同的 URL，因为这意味着要为缩略图加载大图像。我的做法是有一个像“someFile.jpg”和“someFile-big.jpg”这样的命名模式并做这样的事情：

$("img.zoomable").on('click', function(){
    var imageURL = $(this).attr('src');
    backgroundCurtain.css({"display": "block"});
    imageResized.onload = function(){
        var imageWidth = imageResized.width();
        pictureInner.css({"width" : imageWidth});
    };
    imageResized.attr("src", imageURL.split('.')[0]+'-big.jpg');
});
于 2012-08-29T16:41:40.967 回答
1 
var image = $("img");

image.on('click', function(){
    var imageURL = this.src;
    backgroundCurtain.css("display", "block");
    imageResized.attr("src", imageURL);
    var imageWidth = imageResized.width();
    pictureInner.css("width", imageWidth);
}); ​
于 2012-08-29T16:42:50.050 回答
1

问题在于您的选择器。'>' 选择器指定一个直接子级<body><img /></body>。@dstroy 建议的选择器只会抓取整个页面上的任何图像。但是，这可能不是您想要完成的。

我假设您有一些表单元素（让我们假设一个 ID 为“gallery”的 DIV）包含您感兴趣的所有图像。然后您可以使用

var images = $("#gallery img");

这样，图标和“chrome”图像将不会显示在背景上。

于 2012-08-29T16:46:06.203 回答