1

这是一个Flickity轮播，其中包含在PhotoSwipe中打开的图像。

aFlickity Slides 中有一些“工作”的标签，但 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 。

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

4

1 回答 1

0

根据 flickity 的开发人员David DeSandro的建议开发了一个可行的解决方案（未经过广泛测试） ，并使用来自此 Flickity 问题的进一步输入替换为.cellIndexjQuery

Flickity 事件侦听器绑定img到$gallery. 然后目标index的parent用作其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();
  });


});
于 2019-01-11T02:56:36.193 回答