JSFiddle - React, Tailwind, and code Playground

HTML

<div ID="overlay"></div>
<div class="headimage">
    <img src="http://coderpro.ru/images/images/img11.jpg" alt="11"></div>
<div class="nizimage">
    <a href="http://coderpro.ru/images/images/img11.jpg">
    <img src="http://coderpro.ru/images/images/img11.jpg" alt="11"></a>
    <a href="http://coderpro.ru/images/images/img12.jpg">
    <img src="http://coderpro.ru/images/images/img12.jpg" alt="11"></a>
</div>
<a href="okno" class="samefoto">Показать модальное окно</a>
<div class="gallery-box" id="okno">
    <div class="view">
        <div class="big-image">
            <img src="http://coderpro.ru/images/images/img11.jpg">
        </div>
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
    </div>
 
    <div class="thumbnails">
        <a href="http://coderpro.ru/images/images/img11.jpg" class="active">
            <img src="http://coderpro.ru/images/images/img11.jpg" alt="image11"></a>
        <a href="http://coderpro.ru/images/images/img12.jpg"><img src="http://coderpro.ru/images/images/img12.jpg" alt="image12"></a>
        <a href="http://coderpro.ru/images/images/img13.jpg"><img src="http://coderpro.ru/images/images/img13.jpg" alt="image13"></a>
        <a href="http://coderpro.ru/images/images/img14.jpg"><img src="http://coderpro.ru/images/images/img14.jpg" alt="image14"></a>
    </div>
</div>

CSS

.nizimage img{
width:70px;
height:39px;
}
.gallery-box{
display:none;
position:fixed;
padding:5px 5px 5px;
width:320px;
height:200px;
overflow:hidden;
top:50%;
left:50%;
margin-top:-125px;
margin-left:-180px;
border:1px #ccc solid;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
z-index:99999999;
opacity:0;
box-shadow: 0 0 15px rgba(0, 0, 0, 1);
}
.view{
  position:relative;
  margin:0 0 5px;
    z-index:6;
}
.big-image img{
  display:block;
  width:300px;
  height:150px;
    z-index:5;
}
.prev, .next{
  position:absolute;  
  width:40px;
  height:40px;
}
.prev{
  bottom:20px;
  left:20px;
  background:url(http://coderpro.ru/images/images/controls.png) no-repeat 0 0;
}
.next{
  bottom:20px;
  left:250px;
  background:url(http://coderpro.ru/images/images/controls.png) no-repeat -48px 0;
}
 .thumbnails{
  width:605px;
}
.thumbnails a{
  float:left;
  margin:0 5px 0 0;
    z-index:5;
}
.thumbnails a img{
  width:70px;
  height:39px;
  border: 2px solid transparent;
  display:block;
}
.active{
background-color:#2c61bd;
}
.thumbnails .active img{
opacity:0.5;
}
#overlay{
z-index:1;
position: fixed; 
background-color: #000;
opacity: 0.7;
width: 100%; 
height: 100%;
top: 0; 
left: 0;
cursor: pointer;
display: none;
}
.headimage img{
width:300px;
height:150px;
}

JavaScript

$(function() {
    function a(c, d, a, f) {
        var e = c.length,
            b = 0;
        c.each(function(g, a) {
            $("img", a).on("click", function(e) {
                e.preventDefault();
                b = g;
                //d.src = this.src;
$(d).stop().animate({opacity: 0}, 200, function() {
         d.src = a.href; $(d).animate({opacity: 1}, 200);
});
                c.removeClass("active");
                $(a).addClass("active")
            })
        });
        a.click(function(a) {
            a.preventDefault();
            b--;
            b < 0 && (b = e - 1);
            $("img", c.eq(b)).click()
        });
        f.click(function(a) {
            a.preventDefault();
            b++;
            b %= e;
            $("img", c.eq(b)).click()
        })
    }
    $(".gallery-box").each(function(c, d) {
        a($(".thumbnails a", d), $(".big-image img", d)[0], $(".prev", d), $(".next", d))
    })
});


$(document).ready(function() { 
	$('a.samefoto').click( function(event){ 
		event.preventDefault();
       
		$('#overlay').fadeIn(400,
		 	function(){ 
				$('.gallery-box') 
					.css('display', 'block')
					.animate({opacity: 1, top: '50%'}, 200); 
		});
	});
		$('#overlay').click( function(){
		$('.gallery-box')
			.animate({opacity: 0, top: '45%'}, 200,
				function(){ 
					$(this).css('display', 'none'); 
					$('#overlay').fadeOut(400);
				}
			);
	});
});

$(function(){
$('.nizimage a').click(function(){ 
event.preventDefault();
 var i = $('.nizimage a').index(this);
      $('.thumbnails img').eq(i).click();    
    
var images = $(this).find('img');
var imgSrc = $(this).attr('href');
 if ($('.headimage').attr('src') == imgSrc) {}
else
{
$('.headimage').animate({opacity: 0}, 300);
setTimeout(function () 
{
$(".headimage img").attr({ src: imgSrc });
$('.headimage').animate({opacity: 1}, 300);
},300);}
return false;
});
})