Medium zoom not using data-zoom-target for images with srcset

I’m using medium-zoom on some responsive images (with srcset), and I’m running into some weird behaviour. I’m using a script to calculate the most appropriate image size for the clients viewport, and I set that as the data-zoom-target attribute.

But when zooming it seems to be zooming to the wrong size (as instead of enlarging to fill the viewport, the image shrinks). I’m not sure what exactly’s going wrong. Is this a bug, or am I doing something wrong here?

PR implementing the above: https://github.com/ismay/ismaywolff.nl/pull/718 Live url demonstrating the above: https://deploy-preview-718--ismaywolff.netlify.com/work/mould

Unzoomed:

Zoomed:

[francoischalifour]

Thanks for the explanation, that’s quite a good way of solving this!

If you want to reduce jank when unzooming, maybe replace the srcset with the initial src attribute before unzooming? (the one you cloned the initial image with). That’d be fewer pixels to translate back.

I’ll definitely have a closer look at your implementation soon. Thanks for your research!

[gfellerph]

How about applying the new sizes attribute (something like sizes="100vw") after the image has been zoomed? This way the animation would be smooth. The zoomed image might be blurry at first, but will be replaced by the appropriate sized image after download.

Another approach would be setting the sizes attribute immediately, wait for the image to download, then animate but I’m not sure if it’s possible to detect that a new srcset image has been loaded.