polearmik,
большое фото из href
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<style type='text/css'>
body{
height: 500px;
background-color: #8900EB;
}
.gallery-box{
width:300px;
padding:25px 0 0;
margin:0 auto;
}
.view{
position:relative;
margin:0 0 5px;
}
.big-image img{
border-radius: 12px;
border: 2px solid #FFF;
display:block;
width:100%;
height: 150px;
}
.prev, .next{
position:absolute;
width:20px;
height:20px;
}
.prev{
bottom:20px;
left:20px;
background:url(http://coderpro.ru/images/images/controls.png) no-repeat 0 0;
background-size: cover;
}
.next{
bottom:20px;
left:265px;
background:url(http://coderpro.ru/images/images/controls.png) no-repeat -24px 0;
background-size: cover;
}
.thumbnails{
display: flex;
flex-wrap: wrap;
width:100%;
}
.thumbnails a{
width:24%;
flex:1;
margin:4px;
padding: 0;
}
.thumbnails a img{
width:100%;
height:39px;
border-radius: 5px;
border: 1px solid #D2691E;
}
.thumbnails .active img{
border-color:#FFF;
border-width: 2px;
}
</style>
<script>
$(function() {
function Itr(source, indx, loop, fn) {
this.source = source;
this.len = source.length - 1;
this.loop = loop;
this.indx = indx || 0;
this.fn = fn
}
Itr.prototype.next = function() {
return this.change(1)
};
Itr.prototype.prev = function() {
return this.change(-1)
};
Itr.prototype.current = function() {
return this.fn ? this.fn(this.source[this.indx]) : this.source[this.indx]
};
Itr.prototype.change = function(a) {
this.indx += a;
this.indx > this.len && (this.loop ? this.indx = 0 : this.indx = this.len);
this.indx < 0 && (this.loop ? this.indx = this.len : this.indx =
0);
return this.current()
};
Itr.prototype.setIndex = function(a) {
this.indx = a;
return this.current()
};
Itr.prototype.changeLoop = function(a) {
this.loop = !this.loop;
return this.current()
};
function a(links, big, prev, next) {
var fn = new Itr(links, 2, true, function(a) {
big.src = a.href;
links.removeClass("active");
$(a).addClass("active")
});
links.each(function(g, a) {
$("img", a).on("click", function(e) {
e.preventDefault();
fn.setIndex(g)
})
});
prev.click(function(a) {
a.preventDefault();
fn.prev()
});
next.click(function(a) {
a.preventDefault();
fn.next()
});
fn.current()
}
$(".gallery-box").each(function(c, d) {
a($(".thumbnails a", d), $(".big-image img", d)[0], $(".prev", d), $(".next", d))
})
});
</script>
</head>
<body>
<div class="gallery-box">
<div class="view">
<div class="big-image"><img src="" alt="image11"></div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
<div class="thumbnails">
<a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
<a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
<a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
<a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
<a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
</div>
</div>
<div class="gallery-box">
<div class="view">
<div class="big-image"><img src="" alt="image11"></div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
<div class="thumbnails">
<a href="http://xsaxs.ru/wall/30/megapolis_vecher_neboskreby_tuman_prev.jpg">
<img src="http://xsaxs.ru/wall/30/megapolis_vecher_neboskreby_tuman_prev.jpg" alt="image11"></a>
<a href="http://www.desktophdwallpapers.eu/thumbs/hong-kong-t2.jpg"><img src="http://www.desktophdwallpapers.eu/thumbs/hong-kong-t2.jpg" alt="image12"></a>
<a href="http://www.kartinki.me/mini/201209/7562.jpg"><img src="http://www.kartinki.me/mini/201209/7562.jpg" alt="image13"></a>
<a href="https://im2-tub-ru.yandex.net/i?id=f089c3a82a9415434bf21a96b70fce5d&n=33&h=170"><img src="https://im2-tub-ru.yandex.net/i?id=f089c3a82a9415434bf21a96b70fce5d&n=33&h=170" alt="image14"></a>
</div>
</div>
</body>
</html>