Отключить/запретить запуск PhotoSwipe при щелчке по якорю

Это карусель Flickity, содержащая изображения, которые открываются в Фотопролистывание.

В Flickity Slides есть теги a, которые «работают», но модальное окно PhotoSwipe мигает до изменения window.location (щелчок HTML по умолчанию).

Мне нужен какой-то тест перед запуском openPhotoSwipe(), и я попробовал следующее, но он (конечно) работает только при втором щелчке:

$gallery.dataset = [];  
$gallery.dataset.linkClicked = false;

$('.project-archive-link').on('click', function() {
    $gallery.dataset.linkClicked = true;
});
$gallery.on('staticClick.flickity', function(event, pointer, cellElement, cellIndex) {
    if (!cellElement) {
      return;
    }

// Photoswipe functions
var openPhotoSwipe = function() {

...

if ($gallery.dataset.linkClicked === false ) {
    openPhotoSwipe();
}

Это CodePen с базовой структурой.

Держу пари, мой подход неверен.


javascript closures flickity photoswipe
person MikeiLL    schedule 09.01.2019    source источник
comment
Я думаю, что возможно мне нужно переосмыслить прослушиватели событий, как в этом ответе: stackoverflow.com/a/32702560 /2223106   -  person MikeiLL    schedule 10.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Разработал рабочее решение (без тщательного тестирования) на основе эта рекомендация от Дэвид ДеСандро, разработчик flickity, с дополнительными сведениями от этого Flickity. issue, чтобы заменить cellIndex индексом ячейки, полученным с помощью jQuery.

Прослушиватель событий Flickity привязан к тегам img в файле $gallery. Затем index из parent цели используется в качестве изображения Photoswipe в его массиве options.

$(document).ready(function() {


// Flickity
  // --------- /
  var $gallery = $('.gallery').flickity({
    imagesLoaded: true,
    percentPosition: false,
    wrapAround: true,
    pageDots: true
  });
  var flkty = $gallery.data('flickity');

  $gallery.on('click', 'img', function(e) {
     var index = $(e.target).parent().index();

    // Photoswipe functions
    var openPhotoSwipe = function() {
      var pswpElement = document.querySelectorAll('.pswp')[0];

      // build items array

      var items = $.map($(".gallery").find("img"), function(el) {
        return {          
          "src": el.getAttribute('data-src'),
          "w":   el.width,
          "h":   el.height
        }
      });

      var options = {  
        history: false,
        index: index
      };

      var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
      gallery.init();
    };

    openPhotoSwipe();
  });


});
person MikeiLL    schedule 11.01.2019