jQuery onclick 正文中的所有图像 [英] jQuery onclick all images in body

问题描述

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

English isnt my native language so bear with me.

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

Im trying to make it so that when a user clicks any image on my site a gallery sort of div will become visible containing the image at its fullest size.

我现在的做法是；

    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});
}); 

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

This isn't working and to be honest I wasn't expecting it to work. How do I call it so that every image element inside body. How do I "call" every image inside body?

推荐答案

要使用 jquery 引用所有图像，只需这样做

To reference all images using jquery, simply do

var images = $("img");

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

Usually you don't want to have this to apply to all images, though (for example the imageResized shouldn't be in this set). A good solution is to add a css class (for example class="zoomable") to the elements you want to be zoomable and use this selector :

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

看看这个参考.

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

Note that most of the time, we don't use the same URL for the bigger image as this would mean to have big images loaded for thumbnails. My practice is to have a naming pattern like "someFile.jpg" and "someFile-big.jpg" and to do this kind of thing :

$("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');
});

这篇关于jQuery onclick 正文中的所有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！