Custom Gallery Tutorial Part 5

 

/* Next Image */

.new-img-next{

    display: block;

    padding: 6px 10px;

    border-radius: 4px;

    background-color: #111111;

    position: fixed;

    top: 48vh;

    cursor: pointer;

    z-index: 500;

    font-family: Arial, Helvetica, sans-serif;

    color: white;

    text-transform: uppercase;

 

}

.new-img-next:hover{

    opacity: 0.8;

 

}

.new-img-pre{

    display: block;

    padding: 6px 10px;

    border-radius: 4px;

    background-color: #111111;

    position: fixed;

    top: 48vh;

    cursor: pointer;

    z-index: 500;

    font-family: Arial, Helvetica, sans-serif;

    color: white;

    text-transform: uppercase;

 

}

.new-img-pre:hover{

    opacity: 0.8;

 

}

 

 

 

 

function changeImg(changeDir) {

    document.querySelector('#current-image').remove();

    let getImgWindow = document.querySelector('.img-window');

    let newImg = document.createElement('img')

    getImgWindow.appendChild(newImg);

    let calcNewImg ;

    let imgName;

    if(changeDir == 1){

        calcNewImg = getlatestImg + 1 

       

        imgName = images[calcNewImg]; 

        if(getlatestImg == images.length-2){

            calcNewImg = 0

            imgName = images[calcNewImg]; 

        }

    }

    

    else if(changeDir == 0){

        calcNewImg = getlatestImg - 1

        imgName = images[calcNewImg];

        if(getlatestImg == 0){

            calcNewImg = images.length - 2

            imgName = images[calcNewImg];

            

            

            

        }

 

    }

    // console.log(imgName)

    console.log(calcNewImg)

    // console.log(getlatestImg)

 

    var imgurl = imgName.getAttribute('src')

    newImg.setAttribute("src", imgurl);

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

    getlatestImg = calcNewImg

    

 

}

 

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();

}