Disable/Prevent PhotoSwipe 在锚点击时启动

Question

这是一个Flickity carousel which contains images that open in PhotoSwipe。

Flickity 幻灯片中有 a 个标签 "work"，但 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的基本框架。

我打赌我的方法是错误的。

Answer 1

开发了一个 working solution (not extensively tested) based on this recommendation by David DeSandro, flickity's developer, with further input from this Flickity issue 来用 jQuery 获得的细胞索引替换 cellIndex。

Flickity 事件侦听器绑定到 $gallery 中的 img 标签。然后目标 parent 的 index 用作其 options 数组中的 Photoswipe 图像。

$(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();
  });


});

Disable/Prevent PhotoSwipe 在锚点击时启动

Disable/Prevent PhotoSwipe Launch on Anchor Click

javascript

closures

photoswipe

flickity