Estoy tratando de codificar de tal manera que aparezca una imagen ampliada cuando el usuario haga clic en una imagen.
No me da ningún error pero tampoco reacciona. ¿Hice algo mal?
$(document).ready(function() { $(".img-thumbnail").on("click", function() { var Popup = document.createElement("span"); Popup.setAttribute("class", "img-popup"); Popup.innerHTML = this; this.insertAdjacentElement("beforeend", Popup); }); }); .img-popup { width: 50%; height: auto; border-style: groove; background: center; position: relative; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <figure> <img class="double, img-popup, img-thumbnail" src="https://via.placeholder.com/200" alt="Poodle" title="View larger image..." /> <figcaption class="caption1">Standard Poodle</figcaption> </figure>De su pregunta, no está del todo claro lo que quiere lograr. Pero como está mencionando que desea crear una ventana emergente, espero que desee tener un elemento dedicado ( div ) para mostrar su imagen ampliada.
Entonces, en el ejemplo a continuación, hay un elemento #image-pop-up que está oculto de forma predeterminada. Como ya está usando jQuery, a juzgar por el $('.img-thumbnail') en su ejemplo, puede usar algunas de las funciones predeterminadas de jQuery para agregar y eliminar una imagen en el elemento #image-pop-up . Y también esconderlo y mostrarlo. Agregar la imagen al hacer clic en la miniatura y eliminarla al hacer clic en la imagen ampliada.
¡Además, no separe sus clases con comas en un elemento HTML!
$(document).ready(function(){ $('.img-thumbnail').on('click', function() { $('#image-pop-up').prepend('<img src=' + $(this).attr('src') + ' id="enlarged-image" />'); $('#image-pop-up').show(); }); $('#image-pop-up').on('click', function() { $(this).hide(); $('#enlarged-image').remove(); }); }); #image-pop-up { width: 100vw; height: 100%; box-sizing: border-box; padding: 5px; position: absolute; z-index: 999; top: 0; left: 0; display: none; } #image-pop-up img { width: 100%; } figure { height: 80px; width: auto; float: left; display: block; margin: 0 10px 0 0; } .img-thumbnail { height: 100%; border-style: groove; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="image-pop-up"></div> <figure> <img class = "double img-thumbnail" src="https://www.fillmurray.com/400/300" alt="Poodle" title="View larger image..."/> <figcaption class="caption1">Bill 1</figcaption> </figure> <figure> <img class = "double img-thumbnail" src="https://www.fillmurray.com/400/500" alt="Poodle" title="View larger image..."/> <figcaption class="caption1">Bill 2</figcaption> </figure> <figure> <img class = "double img-thumbnail" src="https://www.fillmurray.com/200/300" alt="Poodle" title="View larger image..."/> <figcaption class="caption1">Bill 3</figcaption> </figure>