JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<div class="fullimg none">
        <div class="fullimgbox"></div>
    </div>

    <div class="room">
        <div class="activeimgbox">
            <img src="http://alfakrai.ru/i/mstudio1.jpg" id="img_1" alt="" class="activeimg">
        </div>
        <div class="littlebox">
            <div class="minimgbox">
                <img src="http://alfakrai.ru/i/mstudio2.jpg" id="img_2" alt="" class="minimg"></div>
            <div class="minimgbox">
                <img src="http://alfakrai.ru/i/mstudio3.jpg" id="img_3" alt="" class="minimg"></div>
            <div class="minimgbox">
                <img src="http://alfakrai.ru/i/mstudio4.jpg" id="img_4" alt="" class="minimg"></div>
            <div class="minimgbox">
                <img src="http://alfakrai.ru/i/mstudio5.jpg" id="img_5" alt="" class="minimg"></div>
        </div>
    </div>

CSS

.none {
  display: none;
}


.littlebox img {
  width: 100%;
}

.fullimg {
    height: 100%;
    width: 100%;
    background: rgba(51, 51, 51, 0.75);
    position: absolute;
    cursor: pointer;
}

.fullimgbox img{
  width: 80%;
  max-width: 1200px;
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

.block {
  display: block;
}

.activeimg {
  float:left;
  margin-right: 10px;
}
.littlebox {
  float:left;
  width: 110px;
}

img{
  cursor: pointer;
}

JavaScript

const parseUrl = (url) => {
  var parser = document.createElement('a');
  parser.href = url;
  return parser;
}

function showFull(id) {
  $('.fullimg').fadeIn();
  $('img#img_' + id).clone().appendTo('.fullimgbox');
}

$(document).on('click', '.activeimg', function () {
  const id = $(this).attr('id').replace('img_', '');
  History.pushState(null, 'Picture ' + id, './full_' + id)
});

function hideFull() {
  $('.fullimg').fadeOut();
  $('.fullimgbox').empty();
}

$(document).on('click', '.fullimg', function() {
  History.pushState(null, 'Document', './')
});

History.Adapter.bind(window, 'statechange', function () {
  var State = History.getState();
  const path = parseUrl(State.url).pathname;
  console.log(path);
  if (/\/full_(\d+)/.test(path)) showFull(path.replace(/\/full_(\d+)/, '$1'));
  else hideFull();
});

function changeActive() {
  $('.activeimg').removeClass('activeimg').addClass('minimg').prependTo($(this).parent());
  $(this).appendTo('.activeimgbox').addClass('activeimg').removeClass('minimg');
}

$(document).on('click', '.minimg', changeActive);