Use data-original as src

[slcr]

Would it be possible to use data-original as a src for the zoom?
Right now it just zooms the src-size, which would result in a not much bigger/zoomed image when you're working with correct image sizes.

[spinningarrow]

I wonder what's the best way to achieve this. Maybe this is a use case for the <picture> element?

[thewebartisan7]

Did you found a solution?

I was able to use data-original by updating zoomImage:

        function zoomImage() {
            var img = document.createElement('img')
            img.onload = function () {
                fullHeight = Number(img.height)
                fullWidth = Number(img.width)
                zoomOriginal()
            }

            // Added here targetImage.getAttribute('data-original')
            img.src = targetImage.getAttribute('data-original') || targetImage.currentSrc || targetImage.src
        }

However, the result it's not the same. Something else is required in zoom calculation, because sometimes the image is attached to edge of window without margin.

[thewebartisan7]

This seem works fine:

            if (targetImage.getAttribute('data-original')) {
                targetImage.src = img.src = targetImage.getAttribute('data-original')

            } else {
                img.src = targetImage.currentSrc || targetImage.src
            }

[spinningarrow]

@thewebartisan7 thanks for looking into this! How does this behave on the first zoom for a specific image? I suppose it starts downloading the original image after the thumbnail is clicked?

[thewebartisan7]

I suppose it starts downloading the original image after the thumbnail is clicked?

Yes right. The original images it's not downloaded until you click on thumbnail.

[spinningarrow]

Got it. I think that's not ideal - one of the nice things about zoom.js is how smoothly it works and having to wait for the original image to download after clicking on the zoom takes away from that, doesn't it?

[spinningarrow]

How about using the srcset attribute for the <img> tag? The original full-size image can be the value for src and then responsive image options can be provided by srcset. I haven't tried it yet but I think that should work with zoom-vanilla.js out of the box.

[thewebartisan7]

I think that's not ideal - one of the nice things about zoom.js is how smoothly it works and having to wait for the original image to download after clicking on the zoom takes away from that, doesn't it?

I understand what you mean. I didn't think about this as my internet connection is very fast so I didn't notice any delay with animation, but it's good point to take into account. One thing that passed now in my mind is to start load the original image once users start hover over thumb.

How about using the srcset attribute for the tag? The original full-size image can be the value for src and then responsive image options can be provided by srcset. I haven't tried it yet but I think that should work with zoom-vanilla.js out of the box.

I thought this could works, and I suppose you need to use only the src here:

// Now
	img.src = targetImage.currentSrc || targetImage.src

to

// After
	img.src = targetImage.src

However for my case this would not work, because I have many small thumbs which has same size for all screen size. Not sure how to set srcset and sizes of img tag for catch all screen sizes, so the src it's never used, it's not the purpose of srcset attributes to have this usage.