I am trying to code in such a way that an enlarged image would popup when user clicks on an image.
It does not give me any error but it doesn't react as well. Did I do anything wrong?
$(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>From your question it is not entirely clear what you want to achieve. But since your are mentioning you want to create a pop-up I expect you want to have a dedicated element (div) to showcase your enlarged image.
So in the example below there is an #image-pop-up element that is hidden by default. Since you are already using jQuery, judging by the $('.img-thumbnail') in your example, you can use some of the default jQuery functions to add and remove an image to the #image-pop-up element. And also hide and show it. Adding the image when you click on the thumbnail, and removing it when you click on the enlarged image.
Also do not comma separate your classes in a HTML element!
$(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>