thriveweb / photoswipe-masonry Goto Github PK

photoswipe.com provides the option to close the gallery when the image is pulled down, either with mouse or touch. The plugin version however does not close the gallery when either pulling down the photo with mouse or touch (e.g. touch enabled laptop screens) in Firefox 56.0 for desktop. It does however work on latest version Firefox mobile as well as in Chrome latest version for desktop as well as mobile. Have a look at your demo with latest Firefox for dekstop to reproduce this. It would be great if you could have look into fixing this, might also sort itself out with a new version of Firefox, fingers crossed. Thank you.

From WillyWonder (@willywonder)

Works unless the link is … pid=1, in which case pid=3 is displayed (possibly because 3 images are loaded in memory?). Can be tricked into displaying pid=1 by setting the link to a pid number greater than actually exists. Should be noted that when linking to a particular image in the gallery, one odd-ball thing happens: After using the link and perhaps swiping thru a few images and then leaving the lightbox and the gallery displays, then say scrolling thru the gallery and clicking on a thumbnail, the originally linked image displays (not the image clicked on). After leaving the lightbox a second time, the gallery images then display the correctly when clicked on.

https://wordpress.org/support/topic/hyperlinking-to-a-photo-in-the-gallery/#post-9398704

When lazyload is enabled, either by WordPress natively or through a plugin (e.g. Smush), the gallery is not correctly displayed.
I guess, the plugin cannot calculate the correct positions because the dimensions don't exist, yet.

I don't know exactly how to solve this issue. The images are correctly positioned when all images are loaded and a rescale event triggers a new positioning. Maybe there is a way to trigger this recalculation when images are loaded? Or maybe you could add the images progressively on scroll.

An easy workaround would be to add a class to the img-tags in order to exclude this class from lazy-loading. I guess, I'll try to implement such a workaround.

My gallery has tags with links in their image captions, the a filter gets wrong links without a size and I get undefined errors at split part.

$pic.find('.msnry_item > a').each(function() {

This was enough to fix it for me.