禁用/防止在锚点单击时启动 PhotoSwipe答案

【问题标题】：Disable/Prevent PhotoSwipe Launch on Anchor Click禁用/防止在锚点单击时启动 PhotoSwipe
【发布时间】：2019-06-04 15:50:54
【问题描述】：

这是一个 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。

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

【问题讨论】：

我认为也许我需要重新考虑事件侦听器，如此答案：stackoverflow.com/a/32702560/2223106

标签： javascript closures photoswipe flickity

【解决方案1】：

在this recommendation（flickity 的开发人员）David DeSandro 的基础上开发了一个working solution（未经过广泛测试），this Flickity issue 的进一步输入将cellIndex 替换为jQuery 获得的单元格索引。

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


});

【讨论】：