jQuery onclick all images in body

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 containin

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