Галерея с превью

232

22 декабря 2018, 21:50

Сделал галерею с превью, Помогите как сделать в модальном окне так же что б переносились фото с превью и листались в модальном окне так же сохраняясь после закрытия фото на котором остановились. Количество фото не ограничивается двумя.

<!-- 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="https://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/stretch/off/-/resize/1280x/" alt=""></div>
<nav>
  <a href="https://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/stretch/off/-/resize/1280x/" class="current"><img src="https://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/scale_crop/84x56/center/" alt=""></a>
  <a href="https://i.fotorama.io/5c22d9ee-a631-44bd-b848-363e5f2695cd/-/stretch/off/-/resize/1280x/"><img src="https://i.fotorama.io/5c22d9ee-a631-44bd-b848-363e5f2695cd/-/scale_crop/84x56/center/" alt=""></a>
</nav>
<script>$(".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;
})</script>
<style>.current {
  border: 2px solid red;
}
.photo img {
  width:400px;
}
nav a {
  display:inline-block;
  border: 2px solid white;
}
nav img {
  display:block;
}</style>

jsfiddle

Answer 1

Я надеюсь правильно понял как вы хотели: https://jsfiddle.net/4gW4y/810/?

<!-- 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>
        <nav class = 'modal-nav'>
  <a id="foto1" 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 id="foto2" 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>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>
<div class="photo">
<img id="foto1" src="http://i.fotorama.io/fcee6f7e-2e3b-4a0e-840f-672c0624d6e7/-/stretch/off/-/resize/1280x/" alt=""></div>
<nav class="main-nav">
  <a id="foto1" 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 id="foto2" 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>
.current {
  border: 2px solid red;
}
.photo img {
  width:400px;
}
nav a {
  display:inline-block;
  border: 2px solid white;
}
nav img {
  display:block;
}

$(".photo").on("click", function() {
   $('#preview').attr('src', $('.photo>img').attr('src'));
   $('.modal-nav').find('.current').removeClass("current");
   $('.modal-nav').find('#' + $('.photo>img').attr("id")).addClass("current");
$('#modal').modal('show');
});
$(".main-nav").on("click", "a", function () {
   $(this).addClass("current").siblings().removeClass("current")
   $(".photo img").attr({src:$(this).prop("href"),id:$(this).attr("id")});
   return false;
   })
   $(".modal-nav").on("click", 'a', function (e) {
   let photo = $(e.target).parent();
   $('.modal-nav').find('.current').removeClass("current");
   $(photo).addClass("current");
   $('#preview').attr('src', $(photo).attr("href"));
   $('.photo img').attr({src :$(photo).attr("href"), id:$(photo).attr("id")});
   $('.main-nav').find('.current').removeClass("current");
   $('.main-nav').find('#' + $('.photo>img').attr("id")).addClass("current");
   })