javascriptclosuresphotoswipeflickity

Disable/Prevent PhotoSwipe Launch on Anchor Click


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.


Solution

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