forked from 20xd6/simple_blog
33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
var modalEle = document.querySelector(".modal_gal");
|
|
var modalImage = document.querySelector(".gallery_img");
|
|
Array.from(document.querySelectorAll(".img_thumb")).forEach(item => {
|
|
item.addEventListener("click", event => {
|
|
modalEle.style.display = "block";
|
|
modalImage.src = event.target.src;
|
|
});
|
|
});
|
|
document.querySelector(".close").addEventListener("click", () => {
|
|
modalEle.style.display = "none";
|
|
});
|
|
|
|
function image_modal(document){
|
|
// Get the modal
|
|
var modal = document.getElementById("modal_gallery");
|
|
// Get the image and insert it inside the modal - use its "alt" text as a caption
|
|
var img = document.getElementById("myImg");
|
|
var modalImg = document.getElementById("modal_img");
|
|
var captionText = document.getElementById("modal_img_caption");
|
|
img.onclick = function(){
|
|
modal.style.display = "block";
|
|
modalImg.src = this.src;
|
|
captionText.innerHTML = this.alt;
|
|
}
|
|
// Get the <span> element that closes the modal
|
|
var span = document.getElementsByClassName("close_modal")[0];
|
|
|
|
// When the user clicks on <span> (x), close the modal
|
|
span.onclick = function() {
|
|
modal.style.display = "none";
|
|
}
|
|
}
|