JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    
<!-- 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">&times;</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>

CSS

.current {
  border: 2px solid red;
}
.photo img {
  width:400px;
}
nav a {
  display:inline-block;
  border: 2px solid white;
}
nav img {
  display:block;
}

JavaScript

$(".photo").on("click", function() {
   $('#preview').attr('src', $('.photo>img').attr('src'));
   $('#modal').modal('show');
   
});

$("nav").on("click", "a", function () {
   $(this).addClass("current").siblings().removeClass("current")
   $(".photo img").attr("src", $(this).prop("href"))
   return false;
})