Отключить / предотвратить запуск PhotoSwipe при щелчке по ссылке - PullRequest
Новая
       13

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

0 голосов
/ 09 января 2019

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

В слайдах Flickity есть теги 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 с базовой платформой.

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

1 Ответ

0 голосов
/ 11 января 2019

Разработано рабочее решение (не всесторонне протестировано) на основе этой рекомендации от Дэвид ДеСандро , разработчик Flickity, с дальнейшим вкладом от этого Flickity введите для замены 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();
  });


});
...