Modal image in wp plugin - html

Question

I'm using the plugin "ninja tables pro" to display a long table.
As i use the google sheets importation functionality, i can't use the "lightbox" option.
So i try to create a popup with jquery.
The difficulty is to take the current cliked image to display her without have the prévious one
here is my code :
var btnClose = document.getElementById('btnClose');
btnClose.addEventListener('click',closeModal);
function closeModal() {
overlay.style.display='none';
}
$(document).ready(function() {
$('.img').each(function() {
var currentImage = $(this);
$(this).on("click", function(){
$(".popup").append("<img class='img' src='" + currentImage.attr("src") + "' alt='' width='400' height='400'>");
$("#popup").remove("<img class='img' src='" + currentImage.attr("src") + "' alt='' width='400' height='400'>");
$("#overlay").css("display", "block");
});
});
});
.overlay {
position: fixed;
left: 0px;
top:0px;
background-color: rgba(0,0 ,0 , 0.5);
width: 100%;
height: 100%;
z-index:36;
display:none;
padding: 500px;
}
.popup{
margin-left: auto;
margin-right: auto;
margin-top: -240px !important;
width : 70%;
background-color: rgb(243, 243, 243);
padding: 1em;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.btnClose {
float: right;
font-size:16pt;
cursor: pointer;
color: rgb(26, 26, 26);
}
<img class="img" src="{{row.photoduproduit}}" alt="" width="150" height="150" class="aligncenter size-full wp-image-5505"/>
<div id="overlay" class="overlay">
<div id="popup" class="popup">
<span id="btnClose" class="btnClose">×</span>
(the img with the "{{rowphotoduproduit}}" is to have the src of the pic in the table)
The problem here is that all time i click on a pic, it show it but with the previous one.
Do you have a idea ?
Thanks you in advance

Answer 1

You can just use empty method from jquery to 'empty' the popup before appending the image.
Other Changes made :
add closing </div> tag to div overlay and div popup
remove duplicate class attribute on img
changed overlay in closeModal to $('.overlay')
changed the use of style.display to jquery hide/show methods
made use of template strings instead of concatenation for new
image element
UPDATE : Added a solution with clone and commented out the first solution
var btnClose = document.getElementById('btnClose');
btnClose.addEventListener('click', closeModal);
function closeModal() {
$("#overlay").hide();
}
$(document).ready(function() {
$('.img').each(function() {
const currentImage = $(this);
currentImage.on("click", function() {
$('.popup').empty();
// creating a new image with same src
// const imageToAdd = `<img class='img' src=${currentImage.attr('src')} alt='' width='400' height='400' />`
// $('.popup').append(imageToAdd)
// clone image and change width/height
const clonedImage = $( currentImage ).clone().appendTo( ".popup" );
clonedImage.css({
'width' : '400px',
'height' : '400px'
});
$("#overlay").show();
});
});
});
.overlay {
position: fixed;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 36;
display: none;
padding: 500px;
}
.popup {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: rgb(243, 243, 243);
padding: 1em;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.btnClose {
font-size: 16pt;
cursor: pointer;
color: rgb(26, 26, 26);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="img" src="https://via.placeholder.com/150" alt="" width="150" height="150" />
<img class="img" src="https://via.placeholder.com/350" alt="" width="150" height="150" />
<div class="overlay">
</div>
<div id="popup" class="popup"></div>
<span id="btnClose" class="btnClose">×</span>