Photoswipe - Transition using thumbnails with different aspect ratio

[jb80]

I am really loving the Photoswipe addition to PG. My only gripe is the way Photoswipe is configured for the detail image (large thumbnail) opening transition. Like most PG implementations, my small and medium thumbnails are using (1:1) size ratio and my large thumbnail is using (1:1.333) size ratio. Now the problem with using an irregular ratio for the large thumbnail is the pre-loaded thumbnail image appears distorted on load. The affect is the image appears "stretched" on load and when completely loaded it gives the impression the image "shrinks" again. The issue becomes really apparent on slow internet connections and when viewing regular/square/straight photographs. Below is an example, top of image is detail image (large thumbnail) loading and the bottom is the thumbnail pre-loader. You will note how the edges of the sign do not line up even close which gives a very poor user experience.



here is a video of the transition affect over a slow connection.

If I was to use a (1:1) ratio for the detail image the photo would be significantly "cropped" removing important detail of the image. It would also miss the point considering my site is about photos. Further reading on the Photoswipe FAQ site provides specific guidance on using different-thumbnail dimensions. The recommendations are;

If thumbnail aspect ratio does not match large image, do not define msrc property for slide objects and enable opacity transition option (showHideOpacity:true, getThumbBoundsFn:false).

Now my ask is for some help to implement this change, whether a custom code change or possibly the PG core which could include a configurable switch in the Joomla backend. I am fairly sure that most PG users have irregular large/details thumbnails and could appeal to wider group. Thank you in advance for your support.

[Jan]

Hi, the file for initializing Photoswipe is here:

components\com_phocagallery\assets\photoswipe\js\photoswipe-initialize.js

the msrc is set on line cca 46:
item.msrc = linkEl.children[0].getAttribute('src');

so comment it:

Code: Select all

//item.msrc = linkEl.children[0].getAttribute('src');

and in options, cca line 164, add:

Code: Select all

,
showHideOpacity:true, 
getThumbBoundsFn:false

this means, change from:

Code: Select all

options = {

            // define gallery index (for URL)
            galleryUID: galleryElement.getAttribute('data-pswp-uid'),

            getThumbBoundsFn: function(index) {
                // See Options -> getThumbBoundsFn section of documentation for more info
                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                    rect = thumbnail.getBoundingClientRect(); 

                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            }

        };

to:

Code: Select all

options = {

            // define gallery index (for URL)
            galleryUID: galleryElement.getAttribute('data-pswp-uid'),

            getThumbBoundsFn: function(index) {
                // See Options -> getThumbBoundsFn section of documentation for more info
                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                    rect = thumbnail.getBoundingClientRect(); 

                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            },
			showHideOpacity: true, 
			getThumbBoundsFn: false

        };

Seems it works, please test it. If it will work for you, I will add new parameter in next version.

Jan

[jb80]

Hello Jan,

Thank you for your reply. I have implemented the code changes and can confirm the photo thumbnail pre-loader is removed and is replaced with a dark grey transition. It would seem that all other Photoswipe functionality remains unaffected. In my opinion, the is a better implementation. Thank you again

[Jan]

Ok, thank you for the info.

Jan

[jb80]

Hello Jan,

This change was not incorporated into the most recent build (v4.3.6), did you intend to leave it out or will it remain a custom change?

[Jan]

Hi, the 4.3.6 was released before this topic got solution. It is in feature request list for the next version (most probably 4.3.7).

Jan

[jb80]

OK thanks for the clarification, much appreciated

[Jan]

Ok

[Jan]

Hi, set in version 4.3.7
https://www.phoca.cz/news/961-phoca-gal ... 7-released

Jan

[jb80]

Super, much appreciated!