Question

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?

Answer 1

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