Custom Gallery Tutorial Part 4

 

.img-window{

    width: 100vw;

    height: 100vh;

    background-color: rgba(12, 12, 12, 0.8);

    position: fixed;

    top: 0;

    left: 0;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 100;

 

}

.img-window img{

    max-width: 80vw;

    max-height: 80vh;

    width: 80vw;

    height: 80vh;

 

}

 

 

 

 

var images = document.getElementsByTagName('img');

let getlatestImg ;

let windowWidth = window.innerWidth;

 

 

   var images = document.getElementsByTagName('img');

    console.log('images are', images);

    Array.from(images).forEach((img, index) => {

        img.addEventListener('click', () => {

            getlatestImg = index

            var imgurl = img.getAttribute('src')

            console.log('Url of image', index, imgurl);

            let container = document.body;

            let newImageWindow = document.createElement("div")

            container.appendChild(newImageWindow);

            newImageWindow.setAttribute("class", "img-window");

            newImageWindow.setAttribute("onclick", "closeImage()");

 

            let newImg = document.createElement("img")

            newImageWindow.appendChild(newImg)

            newImg.setAttribute("src", imgurl);

            newImg.setAttribute("id", 'current-image');

 

            newImg.onload = function () {

                let imgWidth = this.width;

                let calcImgEdge = ((windowWidth - imgWidth) / 2) - 80;

 

                let newPreBtn = document.createElement('a');

                let btnPrevText = document.createTextNode('prev')

                newPreBtn.appendChild(btnPrevText);

                container.appendChild(newPreBtn);

                newPreBtn.setAttribute('class', 'new-img-pre')

                newPreBtn.setAttribute('onclick', `changeImg(0)`)

                newPreBtn.style.cssText = `left :  ${calcImgEdge}px;`

 

                let newNextBtn = document.createElement('a');

                let btnNextText = document.createTextNode('next')

                newNextBtn.appendChild(btnNextText);

                container.appendChild(newNextBtn);

                newNextBtn.setAttribute('class', 'new-img-next')

                newNextBtn.setAttribute('onclick', `changeImg(1)`)

                newNextBtn.style.cssText = `right : ${calcImgEdge}px;`

            }

 

        })

      

    })

}

 

function closeImage() {

    document.querySelector('.img-window').remove();

    document.querySelector('.new-img-next').remove();

    document.querySelector('.new-img-pre').remove();

}