Breaking News: Grepper is joining You.com. Read the official announcement!

image gallery functions

glitches guy answered on May 8, 2022 Popularity 5/10 Helpfulness 1/10

answer image gallery functions

image gallery functions

Comment

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
}

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: owlcation.com

Tags: image-gallery javascript

Link to this answer
Share Copy Link

Contributed on May 08 2022

glitches guy

0 Answers Avg Quality 2/10

image gallery functions

Contents

More Related Answers

image gallery functions

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.