Page 1 of 2
Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 09 Jul 2017, 20:23
by 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.
Re: Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 11 Jul 2017, 19:31
by 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
Re: Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 13 Jul 2017, 22:55
by 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
Re: Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 13 Jul 2017, 23:08
by Jan
Ok, thank you for the info.
Jan
Re: Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 01 Sep 2017, 17:05
by 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?
Re: Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 03 Sep 2017, 17:56
by 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
Re: Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 03 Sep 2017, 17:59
by jb80
OK thanks for the clarification, much appreciated
Re: Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 03 Sep 2017, 18:12
by Jan
Ok
Re: Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 19 Dec 2017, 23:38
by Jan
Re: Photoswipe - Transition using thumbnails with different aspect ratio
Posted: 19 Dec 2017, 23:43
by jb80
Super, much appreciated!