Clicked photo stretches on zoom before new photo shows

Created on 16 February 2019, almost 6 years ago
Updated 15 May 2023, over 1 year ago

I have two image styles... one for the clickable thumbnail image and one for the opened Photoswipe images. Just to be clear, the image styles crop/scale the image differently for each. When clicking on the thumbnail... the thumb image zooms to open the Photoswipe box.. .but on zoom that thumb image stretches to fit the size of the Photoswipe Image for a split second, before the the actual Photoswipe image loads. So there is a split moment where the thumbnail shows large and distorted before changing to the correct Photoswipe photo.

Surprised I don't see this already in the issue queue. Any one else experience this? Ideas for a fix?

Thanks!

πŸ› Bug report
Status

Closed: works as designed

Version

2.0

Component

Miscellaneous

Created by

πŸ‡ΊπŸ‡ΈUnited States chucksimply

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡¬πŸ‡§United Kingdom very_random_man

    I just came across this behaviour as I'm using a responsive image style with multiple breakpoints, combining with a number of Focal Point image styles. With the focal point you basically can't use just CSS cropping for anything other than polish unless you go the route of a js focal point library.

    I found changing showHideAnimationType to 'fade' (which should look fine with mismatched aspect ratios) with hook_photoswipe_js_options_alter made no difference and the module appears to implement its own zoom function regardless of options, although I didn't dig too far with that.

    Anyway in case anyone has a similar problem, the workaround for me was to set the fallback image style on the responsive image to one that was about the same size as the smallest responsive breakpoint focal point style. The fallback style just needed to crop but also preserved the original aspect ratio. No focal point.

    The result is that all the focal point image styles are applied in the
    tags and are the ones used on the page and the fallback img src is the thumb used when it opens up. :-)

  • πŸ‡©πŸ‡ͺGermany Anybody Porta Westfalica

    @very_random_man: Perhaps you need πŸ› (Re-)Add width / height also on fallback image Fixed ?

Production build 0.71.5 2024