Source code : 
jQuery(function($){
jQuery(‘article.ecs-post-loop.plattegronden’).on(‘click’, function(){
var plattegronden_img = $(‘img’, this).attr(‘src’);

var content = ‘<div class=”plattegronden-inner-wrapper”>’
+'<img src=”‘+plattegronden_img+'” class=”plattergronden_img_popup”>’
+'</div>’;

setTimeout(function(){
$(‘.plattegrond-popup-container .plattegrond-content’, document).html(content);
}, 300);
});
});

Explanation : 

jQuery(‘article.ecs-post-loop.plattegronden’) – we select the container’s class and bind an on click event. All elements inside this container or even the element itself once click, you will be able to run an instruction what to do.

var plattegronden_img = $(‘img’, this).attr(‘src’) – this function find the image inside the target element. If you wonder what is “this”, it refers to the current clicked element. This will then get the src link of the image and store it in the pattergronden_img variable

var content = ‘<div class=”plattegronden-inner-wrapper”>’
+'<img src=”‘+plattegronden_img+'” class=”plattergronden_img_popup”>’
+'</div>’;

– Next step is to create an html structure where we’ll use the image src to insert it to the popup container. You can name a class anything you wanted to name with your container/html structure.

setTimeout(function(){
$(‘.plattegrond-popup-container .plattegrond-content’, document).html(content);
}, 300);
});
});

– This is the most magical part. In this function, we are telling the function to insert the html structure that we’ve created to the container of popup that we’ve created . .plattegrond-popup-container .plattegrond-content is the class of the popup that we’ve created. We used timeout to delay the function to be able for it to work.