/* news img modal overlay */
.newsImg-modal-overlay {
z-index: 9999;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
text-align: center;
overflow: auto;
}
/* enlarged image */
.newsImg-enlarged-image {
/* max-width: 90%;
max-height: 90%; */
}
HTML
<div class="newsImg-modal-overlay" id="newsImgModalOverlay">
<!-- Enlarged Image -->
<img src="" class="newsImg-enlarged-image" id="newsImgEnlargedImage">
</div>
jQuery
$('img[src="https://example.com/example-img.jpg"]').attr('id', 'g6img');
// Click event with proper ID
$("#g6img").click(function () {
// Get the source of the clicked image
var imgSrc = $(this).attr("src");
// Set enlarged image src
$("#newsImgEnlargedImage").attr("src", imgSrc);
// Show modal
$("#newsImgModalOverlay").fadeIn();
});
// Close modal when clicking outside the enlarged image
$("#newsImgModalOverlay").click(function () {
$(this).fadeOut();
});