jQuery onclick all images in body

English isnt my native language so bear with me.

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.

The way I've done now is;

    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?

To reference all images using jquery, simply do

var images = $("img");

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

Have a look at this reference.

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

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

The issue is with your selector. The '>' selector specifies an immediate child <body><img /></body>. The selector that @dstroy is suggesting would simply grab any image on the entire page. This, though, may not be what your are trying to accomplish.

I'm assuming you have some form element (let's assume a DIV with ID 'gallery') that contains all of the images you are interested in. You could then use

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

This way, icons and 'chrome' images won't be displayed on the background.

来源：https://stackoverflow.com/questions/12182648/jquery-onclick-all-images-in-body

标签

jquery

onclick

document

image