Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как в Fancybox 3 сбросить значение index в $.fancybox.open? (https://javascript.ru/forum/jquery/79005-kak-v-fancybox-3-sbrosit-znachenie-index-v-%24-fancybox-open.html)

kepkame 04.12.2019 14:54
Как в Fancybox 3 сбросить значение index в $.fancybox.open?
 
Всем привет!

Подключил слайдер Slick с изображениями. Fancybox открывает изображения при нажатии на кнопку, а не на само изображение.

У каждой ссылки с изображением прописан data-order с нумерацией от 1 до 5.

При перелистывании слайдера, кнопке передаётся значение data-order от текущего открытого изображения слайдера и задаётся индексом в $fancybox.open. Благодаря этому, при нажатии на кнопку, в fancybox открывается изображение с указанным index, которое необходимо открыть.

Всё отлично срабатывает, открывается нужное изображение, но при закрытии fancybox, листаю в слайдере до другого изображения, нажимаю на кнопку и мне открывается изображение из предыдущего индекса.

В fancybox есть настройка срабатывания события после закрытия слайдера – afterClose, но нигде не могу найти информацию, как сбросить или обновить значение index.

Буду благодарен за любые идеи!

Весь код со слайдером загрузил на Jsfiddle
Ниже часть кода вызывающая fancybox

// сортировка массива объектов по свойству
    let sortObjectsBy = function(field, reverse, primer) {
      let key = primer ? function(x) {
        return primer(x[field])
      } : function(x) {
        return x[field]
      };
      reverse = !reverse ? 1 : -1;
      return function(a, b) {
        return a = key(a),
          b = key(b),
          reverse * ((a > b) - (b > a));
      }
    }


    jQuery('#wcOpenFullPhoto').on('click', function(e) {
      var fancyElements = [];

      e.preventDefault();

      // создание массива объектов fancybox
      jQuery('.product-gallery__item a').each(function(index) {
        var el = jQuery(this).get(0),
          order = jQuery(this).data("order");

        fancyElements.push({
          src: el.href,
          caption: el.title,
          order: order
        });
      });

      // сортировка массива объектов fancybox по свойству "order"
      fancyElements.sort(sortObjectsBy("order", false, function(a) {
        return a;
      }));

      // запуск fancybox программно
      jQuery.fancybox.open(
        fancyElements, {
          // пользовательские опции
          loop: false,
          afterClose: function() {

          }
        },
        jQuery("#wcOpenFullPhoto").data("order") - 1 // запустить галерею из выбранного индекса

      );
    });

рони 04.12.2019 15:50
fancybox slick
 
kepkame,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .product-gallery {
  position: relative;
  width: 300px;
}
.product-gallery__item {
  position: relative;
  width: 220px;
  height: 220px;
  object-fit: cover;
  padding: 0;
}
.product-gallery__item a {
  position: relative;
  display: block;
  cursor: grab;
}
.product-gallery__item img {
  width: 220px;
  height: 220px;
  object-fit: cover;
}
.gallery-thambnails.slick-slider {
  display: block;
  padding-left: 0;
}
/* Thambnails */
.gallery-thambnails .slick-track {
  margin-right: 1px;
  margin-left: 1px;
}
/* Highlight thambnails */
.gallery-thambnails .slick-current img {
  border: 1px solid brown;
}
.gallery-thambnails img {
  width: 40px;
  height: 40px;
}
/* Button zoom-in */
.gallery-thambnails__trigger {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border: 3px solid #ff0000;
  border-radius: 50%;
  cursor: zoom-in;
}
  </style>
  <script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
  <script>
jQuery(function() {
 var fancyElements = jQuery.map(jQuery('.product-gallery__item a'), function(el) {
      return{
      src: el.href,
      caption: el.title
     }
    });

jQuery(".product-gallery__wrapper").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: false,
  centerMode: false,
  focusOnSelect: true,
  asNavFor: '.gallery-thambnails'
});
// Highlight thumbnail if large image is the same
jQuery(".gallery-thambnails").on("afterChange", function(event, slick, currentSlide, nextSlide) {
  // remove all active class
  jQuery(".gallery-thambnails .slick-slide").removeClass("slick-current");
  // set active class for current slide
  jQuery(".gallery-thambnails .slick-slide:not(.slick-cloned)").eq(currentSlide).addClass("slick-current");
  jQuery("#wcOpenFullPhoto").data("order", currentSlide);
});
jQuery(".gallery-thambnails").slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  infinite: false,
  dots: false,
  centerMode: false,
  focusOnSelect: true,
  asNavFor: '.product-gallery__wrapper'
});
jQuery('#wcOpenFullPhoto').on('click', function(e) {
  e.preventDefault();
  jQuery.fancybox.open(
    fancyElements, {
      // Custom options
      loop: false,
      afterClose: function() {
      }
    },
    jQuery("#wcOpenFullPhoto").data("order")  // Start gallery from selected index
  );
});
});
  </script>
</head>
<body>
<div class="product-gallery">
  <!-- Big images -->
  <figure id="wcGallaryWrapper" class="product-gallery__wrapper">
    <div class="product-gallery__item slick-current">
      <a href="https://twees.ru/demo/1.jpg" data-fancybox="gallery">
        <img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/1.jpg" alt="img-01">
      </a>
    </div>
    <div class="product-gallery__item">
      <a href="https://twees.ru/demo/2.jpg" data-fancybox="gallery">
        <img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/2.jpg" alt="img-02">
      </a>
    </div>
    <div class="product-gallery__item">
      <a href="https://twees.ru/demo/3.jpg" data-fancybox="gallery">
        <img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/3.jpg" alt="img-03">
      </a>
    </div>
    <div class="product-gallery__item">
      <a href="https://twees.ru/demo/4.jpg" data-fancybox="gallery">
        <img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/4.jpg" alt="img-04">
      </a>
    </div>
    <div class="product-gallery__item">
      <a href="https://twees.ru/demo/5.jpg" data-fancybox="gallery">
        <img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/5.jpg" alt="img-05">
      </a>
    </div>
  </figure>
  <!-- Thambnails -->
  <ol class="gallery-thambnails">
    <li class="gallery-thambnails__item slick-current">
      <img src="https://twees.ru/demo/1.jpg" width="100" height="100" alt="img-1">
    </li>
    <li class="gallery-thambnails__item">
      <img src="https://twees.ru/demo/2.jpg" width="100" height="100" alt="img-2">
    </li>
    <li class="gallery-thambnails__item">
      <img src="https://twees.ru/demo/3.jpg" width="100" height="100" alt="img-3">
    </li>
    <li class="gallery-thambnails__item">
      <img src="https://twees.ru/demo/4.jpg" width="100" height="100" alt="img-4">
    </li>
    <li class="gallery-thambnails__item">
      <img src="https://twees.ru/demo/5.jpg" width="100" height="100" alt="img-5">
    </li>
  </ol>
  <!-- Button zoom-in -->
  <a id="wcOpenFullPhoto" class="gallery-thambnails__trigger" href="" data-fancybox="gallery" data-order="0" title="Zoom-in"></a>
</div>
</body>
</html>

kepkame 04.12.2019 17:42
Рони,
спасибо за помощь! Это отличное решение.
Мало того, что всё заработало, так ещё и меньше кода)) Благодарю!


Часовой пояс GMT +3, время: 09:43.