const images = document.querySelectorAll(".gallery__item img");
let imgIndex
let imgSrc;
// get images src onclick
images.forEach((img, i) => {
img.addEventListener("click", (e) => {
imgSrc = e.target.src;
//run modal function
imgModal(imgSrc);
//index of the next image
imgIndex = i;
});
});
//creating the modal
let imgModal = (src) => {
const modal = document.createElement("div");
modal.setAttribute("class", "modal");
//add modal to the parent element
document.querySelector(".main").append(modal);
//adding image to modal
const newImage = document.createElement("img");
newImage.setAttribute("src", src);
//creating the close button
const closeBtn = document.createElement("i");
closeBtn.setAttribute("class", "fas fa-times closeBtn");
//close function
closeBtn.onclick = () => {
modal.remove();
};
//next and previous buttons
const nextBtn = document.createElement("i");
nextBtn.setAttribute("class", "fas fa-angle-right nextBtn");
// change the src of current image to the src of next image
nextBtn.onclick = () => {
newImage.setAttribute("src", nextImg())
};
const prevBtn = document.createElement("i");
prevBtn.setAttribute("class", "fas fa-angle-left prevBtn");
// change the src of current image to the src of pevious image
prevBtn.onclick = () => {
newImage.setAttribute("src", prevImg())
}
modal.append(newImage, closeBtn, nextBtn, prevBtn);
};
//next image function
let nextImg = () => {
imgIndex++;
//check if it is the the last image
if (imgIndex >= images.length) {
imgIndex = 0
}
//return src of the new image
return images[imgIndex].src;
};
//previous image function
let prevImg = () => {
imgIndex--;
console.log(imgIndex);
//check if it is the first image
if (imgIndex < 0) {
imgIndex = images.length - 1
}
//return src of previous image
return images[imgIndex].src
}