Показать сообщение отдельно
  #2 (permalink)  
Старый 11.09.2018, 23:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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">&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>

</body>
</html>
Ответить с цитированием