image-viewer.js

'use strict';

const imgUrls = Array.prototype.slice.apply(document.querySelectorAll('img')).map(img => img.src);
document.body.innerHTML = '';

const cover = document.createElement('div');

for (const [key, value] of Object.entries({
  position: 'absolute',
  left: '0px',
  top: '0px',
  width: '100vw',
  height: '100vh',
  backgroundColor: 'rgba(0, 0, 0, 0.9)',
  zIndex: '100',
})) {
  cover.style[key] = value;
}

const displayImg = document.createElement('img');

for (const [key, value] of Object.entries({
  position: 'absolute',
  left: '5vw',
  top: '5vh',
  width: '90vw',
  height: '90vh',
  objectFit: 'contain',
  zIndex: '100',
})) {
  displayImg.style[key] = value;
}

displayImg.src = imgUrls[0];

cover.appendChild(displayImg);
document.body.appendChild(cover);

document.addEventListener('keydown', (() => {
  let index = 0;
  
  const handler = (evt) => {
    //if (evt.keyCode === 27) {
    //  cover.remove();
    //  document.removeEventListener('keydown', handler);
    //}
    
    if (evt.keyCode === 37) {
      index += imgUrls.length - 1;
    } else if (evt.keyCode === 39) {
      index += 1;
    }
    
    index %= imgUrls.length;
    
    displayImg.src = imgUrls[index];
  };
  
  return handler;
})());