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