I know that there are many questions and answers pertaining this, but i have tried but am still unable to do so. Please help.
Here is my js code:
$(document).ready(clicklistener); // once ready, run clicklistener function
function clicklistener() {
$(".image-thumbnail").click(popup); // run popup function when ".image-thumbnail" is clicked}
function popup() {
var srcname = $(this).attr("src"); // get source image filename
var newfile = srcname.replace("small", "large"); // replace with large img
if ($(this).parent().children("span").children("img").hasClass("image-popup")) { // traverse the elements to check if the image popup already exists
$(this).parent().children("span").remove(); // remove if it already exists
} else {
var printimg = "<span><img class=\"image-popup\"src=\"" + newfile + "\"></img></span>";
$(this).after(printimg); // create img if it doesn't exist
}}
Doesn't look like you have an event defined for closing it (unless you click on the popup). SO you need to write one:
$(document).ready(function(){
$(".image-thumbnail").click(function(){
// allow for body.click to first hide any current images
setTimeout(function(){popup($(this))}, 600)); // run popup function when ".image-thumbnail" is clicked
});
function popup($ele) {
var srcname = $ele.attr("src"); // get source image filename
var newfile = srcname.replace("small", "large"); // replace with large img
if ($ele.parent().children("span").children("img").hasClass("image-popup")) { // traverse the elements to check if the image popup already exists
$ele.parent().children("span").remove(); // remove if it already exists
} else {
var printimg = "<span><img class=\"image-popup\"src=\"" + newfile + "\"></img></span>";
$ele.after(printimg); // create img if it doesn't exist
}
}
$(window).click(function(){
$('.image-popup').remove()
});
})