Thumbnails instead of full size images

[veloxy]

I would want to show this to the frontend guys at work but I already know that there's going to be complaints about having full resolution images on the page, which adds to the page size.

If you use this on mobile sites, the site wil be loading very slow depending on how large your images are.

Maybe you could have it behave more like this:

<img src="img/thumbnail-image.jpg" data-zoom="img/full-image.jpg" .. />

If you can pull that off, you could reduce the page load time (and bandwidth) a lot on sites making heavy use of images and this plugin.

Just a suggestion!

[Swatto]

:+1:

[fat]

Makes sense – we did a similar thing at medium - and had the image zoom work with a lazy image fetching service.

The problem is you need full-image's dimensions before you start the animation, so without a service like that you're kinda screwed (and you get into a state where clicks are delayed waiting for larger image to load… then you need loading bars, etc. it's a whole thing).

So i have two recommendations for you :)

1) Implement an image prefetcher - separate from this plugin and try to get these working together. Shouldn't be ~too~ hard, but not something I really have time for at this moment, sorry :<

2) (and this is the route i'd probably go) - on mobile don't use this plugin - instead write a simple script which just opens the fullsize image in a new tab. This plugin already does that if you click an image while holding the meta key, and it's pretty straight forward and easy to get going.

Hope that helps!

[slorber]

@fat I'm able to provide ZoomJS the image dimensions of the original image. (I can put width/height attributes in the html markup)

Would it be possible to pass them to ZoomJS so that maybe it displays the thumbnail in that size in bad quality, and the thumbnail is overriden by the good quality image somehow?

[keoshi]

I second @slorber's question about passing the width/height attributes to zoom.js directly, so I can use a lazy load solution in parallel with this beauty.

[heavybeard]

@keoshi check my fork on my repositories (I'm on smartphone now so I can't link it faster)

[keoshi]

@heavybeard thanks a bunch for sharing that. Unfortunately, it's not working for me either. The issue is the same: when the zoom happens there's a slight jump in the page; seems like the DOM container where the image was is collapsed for half a second.

To give a little bit more context:

• Page loads with the placeholders in place (base64 encoded 1x1 pixel image).
• Lazy load happens on images that come into view.
• When lazy loaded images clicked, there's a jump in the page, zoom occurs instantly (no transition), and the image then slides into place vertically.

Here's a gif that illustrates the issue: first the lazy loaded image, then one fetched on page load.

If this isn't helpful or distantly related to the initial issue, I'm happy to open a new one.

[heavybeard]

Hi @keoshi. Had you try the data-original attribute? You can watch how it works here on the first image. In my case this works perfectly. Let me know

[keoshi]

I don't think I did -- will give it another shot later.

[keoshi]

Hi again @heavybeard — gave it another shot, but in my case data-zoom-original doesn't help because I'm already showing the real sized images on lazy load, just want a way to zoom them. Thank you for helping though!

[heavybeard]

Can you create a jsbin for trying it? Sorry for insisting, but I would like to help

[keoshi]

@heavybeard And I appreciate that, thank you. I think I've got it all sorted out now, I was using specific CSS transition parameters (transition: opacity, filter .3s ease;) to get the reveal I wanted, and they overrode zoom.js' own CSS transition, causing the image to slide down rather than zooming.

Using transition: all .3s ease; allows me to add more to the transition without losing the zoom effect, making it all work. As for the lazy loading, I did have to switch from lazysizes to unveil as noted in https://github.com/fat/zoom.js/issues/79

Thanks for your help again!

[heavybeard]

Perfect :smile:

You're welcome