Make pop up images for every image with modal-img class. Display subtext if attr subtext is set. With arrow keys it switch between modal-img images.

set_modalImgs.js

setModalImgs(){

		// CLICK -----------------------------------------------------
    $(document).on('click', '.modal-img', function(e){

      const TARGET = e.target,
            SCREEN_RATIO = (window.innerWidth -100)/(window.innerHeight -100),
            IMG_WIDTH = TARGET.naturalWidth,
            IMG_HEIGHT = TARGET.naturalHeight,
            IMG_RATIO = IMG_WIDTH/IMG_HEIGHT,
            IMG_SRC = TARGET.src,
            IMG_ALT = TARGET.alt,
            IMG_SUBTEXT = $(TARGET).attr('subtext'),
            IS_IMG_HORIZONTAL = IMG_RATIO > SCREEN_RATIO
			
			$(TARGET).addClass('popped-img')

      var div = $('<div></div>').addClass('modal-div').appendTo(document.body)
      div.css({

        display: 'flex',
        position: 'fixed',
        top: 0,
        left: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
        height: '100vh',
        width: '100vw',
        cursor: 'pointer',
        zIndex: 7
      })
      div.click(function(){
				
				$(TARGET).removeClass('popped-img')
				div.remove()
			})

      // IMG ---------------------------------------------------------------
      var img_div = $('<div></div>').addClass('modal-img_div').appendTo(div)
      img_div.css({

        cursor: 'default',
        position: 'absolute',
        transform: 'translateY(-50%) translateX(-50%)',
        top: '50%',
        left: '50%',
        zIndex: 8
      })
      img_div.click(e => e.stopPropagation())

      var img = $('<img>').appendTo(img_div)
      img.attr('src', IMG_SRC)
      img.attr('alt', IMG_ALT)

      if(IS_IMG_HORIZONTAL){ img_div.width('95%'); img.width('100%') }
      else{ img_div.height('85%'); img.height('100%') }

      // CROSS -----------------------------------------------------------------------
      var cross = $('<p>&#10006</p>').addClass('modal-cross').appendTo(div)
      cross.css({

        position: 'absolute',
        right: 0,
        top: 0,
        margin: '20px',
        color: 'white',
        fontSize: '30px',
        zIndex: 9
      })

      // SUBTEXT ----------------------------------------------------------------------
      if(IMG_SUBTEXT){
        
        var subtext = $('<p></p>').addClass('modal-subtext').appendTo(img_div)
        subtext.text(IMG_SUBTEXT)
        subtext.css({

          cursor: 'default',
          position: 'absolute',
          left: 0,
          top: img.height()+'px',
          margin: 0,
          padding: '10px 10px 10px 0',
          fontSize: '18px',
          color: 'white',
          zIndex: 9
        })
        subtext.click(e => e.stopPropagation())
        
        img_div.css('top', 'calc(50% - 15px)')
      }

    })
			
		// HOVER -----------------------------------------------------
		$(document).on('mouseenter', '.modal-img', e => $(e.target).css({'cursor': 'pointer', 'opacity': 0.7}))
		.on('mouseout', '.modal-img', e => $(e.target).css('opacity', 1))
		
		// ARROWS -----------------------------------------------------
		$(document).keydown(function(ev){

			if($('.modal-div').length){
				
				var img = $('.popped-img').first()

				var toTrigger

				if(ev.keyCode == 37){
					
					toTrigger = img.prevAll('.modal-img').first()

					if(!toTrigger.is('img')){
						
						toTrigger = img.parent().prev().children('.modal-img')
						while(toTrigger.length && !toTrigger.is('img')) toTrigger = toTrigger.parent().prev()
					}
				}else if(ev.keyCode == 39){
					
					toTrigger = img.nextAll('.modal-img').first()
					
					if(!toTrigger.is('img')){
						
						toTrigger = img.parent().next().children('.modal-img')
						while(toTrigger.length && !toTrigger.is('img')) toTrigger = toTrigger.parent().next()
					}
				}

				if(toTrigger.is('img')){
					
					img.removeClass('popped-img')
					$('.modal-div').first().remove()
					toTrigger.trigger('click')
				}
			}
		})
  }