HG101 modal image slideshow

snippet.js

var $ = jQuery;
var $galleryThumbnails = $('.left-sidebar-gallery')

$galleryThumbnails.off('.gallery');
$('#gallery_modal').off('.gallery').remove();
$(document).off('.gallery');

var slidesCount = $galleryThumbnails.find('a').length;
var $modal = $('<div />', {
    id: 'gallery_modal',
    style: `
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1001;
      background: rgba(0, 0, 0, .7) !important;
    `,
    html: `
      <div style="
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        padding: 16px;
        min-width: 80px;
        min-height: 80px;
        transform: translate(-50%, -50%);
        background: #fff url('https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif') 50% 50% no-repeat !important;
      "><span></span></div>
    `
}).on('click.gallery', (e) => {
  if (e.currentTarget === $modal[0]) {
    $modal.css('display', 'none');
  }
}).appendTo(document.body);

var $next = $('<div />', {
  style: `
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #999 !important;
    border-radius: 20px 0 0 20px;
    background: #fff !important;
    cursor: pointer;
  `,
  text: '➤'
}).on('click.gallery', (e) => {
  changeSlide(1);
  return false;
}).appendTo($modal.find('> div'));

var $prev = $next.clone();
$prev.css({
  right: 'auto',
  left: 0,
  transform: 'translateY(-50%) rotate(180deg)'
}).off('.gallery').on('click.gallery', (e) => {
  changeSlide();
  return false;
}).appendTo($modal.find('> div'));

var showImage = (src) => {
  $modal.css('display', 'block').find('span').html($('<img />', {
    src,
    style: `
      display: block;
      max-width: 85vw;
      max-height: 85vh;
    `
  }));
};

var changeSlide = (forward) => {
  const imgSrc = $modal.find('img').attr('src');
  const $currentSlide = $galleryThumbnails.find(`a[href="${imgSrc}"]`);
  if (forward) {
    const $next = $currentSlide.next('a');
    if ($next.length) {
      showImage($next.attr('href'));
    }
  }
  else {
    const $prev = $currentSlide.prev('a');
    if ($prev.length) {
      showImage($prev.attr('href'));
    }
  }
};

$('.left-sidebar-gallery').on('click.gallery', 'a', (e) => {
  e.preventDefault();

  showImage(e.currentTarget.href);
});

$(document).on('keyup.gallery', (e) => {
  const keyActions = {
    Escape: () => $modal.css('display', 'none'),
    ArrowRight: () => changeSlide(1),
    ArrowLeft: () => changeSlide()
  }

  keyActions[e.key] && keyActions[e.key]();
});