Disable/Prevent PhotoSwipe Launch on Anchor Click

Question

It's a Flickity carousel which contains images that open in PhotoSwipe.

There are a tags within the Flickity Slides which "work", but the PhotoSwipe modal flashes prior to the window.location changing (default HTML click).

I need some kind of test before running openPhotoSwipe() and had tried the following, but it (of course) only works on the second click:

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

This is a CodePen with the basic framework.

I'm betting my approach is wrong.

Answer 1

Developed a working solution (not extensively tested) based on this recommendation by David DeSandro, flickity's developer, with further input from this Flickity issue to replace cellIndex with the cell index as obtained by jQuery.

The Flickity event listener is bound to the img tags within the $gallery. Then the index of the parent of the target is used as the Photoswipe image within it's options array.

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


});