Sé que hay muchas preguntas y respuestas relacionadas con esto, pero lo he intentado pero aún no puedo hacerlo. Por favor ayuda.
Aquí está mi código js:
$(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 }}No parece que tenga un evento definido para cerrarlo (a menos que haga clic en la ventana emergente). Entonces necesitas escribir uno:
$(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() }); })