Closed onedrawingperday closed 6 years ago
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:
data-hd
URL on the event show
(when the user clicks on the image)src
attribute to the data-hd
's value on shown
* (when the image is fully zoomed in)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?
Hi. Attaching a load
event to data-hd
looks good. Perhaps it would also be good to attach a class on the image after the load. e.g. loaded.
What would you need that class for?
On second thought you're right, a class is not needed in this case.
Fixed with #21.
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
EDIT Or using an attribute for the high res like so: