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

    

 

}