Picture Gallery - next/previous Image | (INACTIVE) Learn Build Teach | Page 1

Hello everyone, I started with HTML, CSS, and JavaScript just a few weeks ago. I have now programmed a photo gallery.

I wanted to place two arrows in the popup where the selected photo is displayed in large size. One arrow for forward and one for backward. I want to navigate through the gallery with these arrows without closing the popup.

Unfortunately, I couldn't manage it myself, but maybe someone here can give me a hint, show me a code snippet, or something similar 🙂

I'm stuck and hoping for your input.

P.s.: the images are pretty big atm... sorry for that 🙂

i cant post the link to the page, so here is the JavaScript code i use (pretty much the same as in the video):

const popup = document.getElementById('popup');
const selectedImage = document.getElementById('selectedImage');
const imageIndexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 
    15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];
const selectedIndex = null;


imageIndexes.forEach((i) => {
    const image = document.createElement('img');
    image.src = `img/image_${i}.JPEG`;
    image.alt = `Urlaubsfoto ${i}`;
    
    image.classList.add('galleryImg');


    //Version 1
    image.addEventListener('click', () => {
        popup.style.transform = `translateY(0)`;
        selectedImage.src = `img/image_${i}.JPEG`;
        selectedImage.alt = `Urlaubsfoto ${i}`});

    gallery.appendChild(image);
});

//Version 1 Popup/Cover
popup.addEventListener('click', () => {
    popup.style.transform = `translateY(-100%)`;
    popup.src = '';
    popup.alt = '';
})

#Picture Gallery - next/previous Image