triadgallery.js

let shown = false;
let currentindex = 0;
let bigdisp = document.createElement('div');
document.body.appendChild(bigdisp);
let sources = [...document.querySelectorAll('img')].map(i => i.src)
let all = sources.length;
bigdisp.style.zIndex = 10;
bigdisp.style.position = 'fixed';
bigdisp.style.right = '20px';
bigdisp.style.left = '20px';
bigdisp.style.top = '20px';
bigdisp.style.bottom = '20px';
bigdisp.style.background = 'url() center center  no-repeat #000';
bigdisp.style.border = '1px solid #fff';
bigdisp.style.backgroundSize = '80%'
bigdisp.style.display = 'none';

const showimg = src => {
    currentindex = sources.indexOf(src);
    bigdisp.style.backgroundImage = `url(${src})`;
    bigdisp.style.display = 'block';
    shown = true;
}
const getpic = currentindex => {
    showimg(sources[currentindex]);
}
document.addEventListener('keydown', ev => {
   if (shown) {
   ev.preventDefault();
    if(ev.key === "Escape") {
        bigdisp.style.display = 'none';
        shown = false;
    }    
    if(ev.key === "ArrowLeft") {
        currentindex--;
        if(currentindex < 0) {
            currentindex = all - 1;
        }
        getpic(currentindex);
    }    
    if(ev.key === "ArrowRight") {
        currentindex = (currentindex + 1) % all;
        getpic(currentindex);
    }    

   }
});

document.body.addEventListener('click', ev => {
    ev.preventDefault();
    if (ev.target.nodeName === "IMG") {
        showimg(ev.target.src)
    }
})