DimonFreeman,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.current {
border: 2px solid red;
}
.photo img {
width:400px;
}
nav a {
display:inline-block;
border: 2px solid white;
}
nav img {
display:block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function() {
$(".photo").on("click", function() {
$('#modal nav').replaceWith($(".photo + nav").clone(true))
$('#modal').modal('show');
});
$("nav").on("click", "a", function () {
var index = $(this).index();
$("nav a").removeClass("current")
$("nav").find("a:eq("+index+")").addClass("current")
$(".photo img, #preview").attr("src", $(this).prop("href"))
return false;
})
});
</script>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Закрыть</span></button>
<h4 class="modal-title" id="myModalLabel">Изображение</h4>
</div>
<div class="modal-body">
<img src="" id="preview" style="width: 500px; height: 250px;" >
<nav>
<a href="" class="photo1"><img /></a>
<a href="" class="photo2"><img /></a>
</nav>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="photo"><img src="http://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/stretch/off/-/resize/1280x/" alt=""></div>
<nav>
<a href="http://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/stretch/off/-/resize/1280x/" class="current"><img src="http://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/scale_crop/84x56/center/" alt=""></a>
<a href="http://i.fotorama.io/5c22d9ee-a631-44bd-b848-363e5f2695cd/-/stretch/off/-/resize/1280x/"><img src="http://i.fotorama.io/5c22d9ee-a631-44bd-b848-363e5f2695cd/-/scale_crop/84x56/center/" alt=""></a>
</nav>
</body>
</html>
