Make img thumb and then load larger img

First of all thank you for the script. It is by far the best medium like zoom that I’ve seen, UX wise.

But the way it’s structured with just one huge scaled image makes it bad for mobile and Google Page Speed does not like it at all.

How about changing the html structure so that a smaller image is displayed first and then load the high resolution image on click in the overlay? The thumb could be displayed big in the overlay until the high-res has loaded.

Something along the lines of

<a class="medium-zoom-image" href="images/1-jumbo.jpg">
<img src="images/1.jpg" alt="Medium Zoom illustration" class="medium-zoom-thumb">
</a>

EDIT Or using an attribute for the high res like so:

<img src="images/1.jpg" data-hd="images/1-jumbo.jpg" alt="Medium Zoom illustration" class="medium-zoom-thumb">

[francoischalifour]

Hi, thank you for getting involved. Your issue is somehow related to #3 (they both aim at solving the same problem).

I like your second solution better. My first view on this would be to:

1. Load the data-hd URL on the event show (when the user clicks on the image)
2. Set the src attribute to the data-hd’s value on shown* (when the image is fully zoomed in)
3. Reset the src attribute on hide or hidden (see which one is more coherent)

(*) It might be more relevant to detect when the image is fully loaded instead of relying on the shown event to not show a partial image. That means attaching a load event to the newly created data-hd image.

What’s your view on this?

[francoischalifour]

Fixed with #21.