JSFiddle - React, Tailwind, and code Playground
HTML
<div class="fullimg none">
<div class="fullimgbox"></div>
</div>
<div class="room">
<div class="activeimgbox">
<a href="#img"><img src="http://alfakrai.ru/i/mstudio1.jpg" alt="" class="activeimg"></a>
</div>
<div class="littlebox">
<div class="minimgbox">
<img src="http://alfakrai.ru/i/mstudio2.jpg" alt="" class="minimg"></div>
<div class="minimgbox">
<img src="http://alfakrai.ru/i/mstudio3.jpg" alt="" class="minimg"></div>
<div class="minimgbox">
<img src="http://alfakrai.ru/i/mstudio4.jpg" alt="" class="minimg"></div>
<div class="minimgbox">
<img src="http://alfakrai.ru/i/mstudio5.jpg" alt="" class="minimg"></div>
</div>
</div>
<div class="ha">123</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
String.prototype.filename=function(extension){
var s= this.replace(/\\/g, '/');
s= s.substring(s.lastIndexOf('/')+ 1);
return extension? s.replace(/[?#].+$/, ''): s.split('.')[0];
}
var jactive = 0;
addEventListener("popstate",function(e){
if (jactive == 1) {
$('.fullimg').fadeOut();
$('.fullimgbox').empty()
jactive = 0;
} else {
jactive = 1;
}
},false);
$(document).on('click', '.activeimg', function () {
$('.fullimg').fadeIn();
$('.fullimgbox').append("<img src='http://alfakrai.ru/i/l" + $(this).attr('src').filename() + ".jpg' alt='123'>");
console.log(jactive);
});
$(document).on('click', '.fullimg', function () {
$('.fullimg').fadeOut();
$('.fullimgbox').empty()
jactive = 0;
console.log(jactive);
});
$(document).on('click', '.minimg', function () {
$('.activeimg').removeClass('activeimg').addClass('minimg').prependTo($(this).parent());
$(this).appendTo('.activeimgbox').addClass('activeimg').removeClass('minimg');
});