search

fat / zoom.js

Medium's Image Zoom for jQuery
https://fat.github.io/zoom.js
MIT License
4.04k stars 331 forks source link

Feature Request: Use Object-fit: cover to zoom a "thumbnail" into a full-sized image #26

Closed brmullikin closed 9 years ago

brmullikin commented 9 years ago

I was integrating zoom.js into a project of mine when I thought to myself, hey, you know what would be neat? Zooming in from a "cropped" version of an image to the full-sized image. And so I made up a quick and dirty example: http://codepen.io/brmwebdev/full/mJPREm/.

To get this working properly, we would probably need to declare the intended width of the zoomed image (I think), maybe with something like an optional data-zoom-width and data-zoom-height, which would give us the new aspect ratio, so we could account for the change in the image size? Or maybe a more succinct, but less user-friendly data-zoom-ratio? Or is there a cleverer way to determine this?

I'm going to try to see if I can come up with something this weekend, but thought I would share as an issue in case anyone had a bright idea.

fat commented 9 years ago

going to close this for now, as it isn't technically an issue with zoom.js - but let me know where you get with it :)

round commented 9 years ago

I managed to put together something that addresses this – by offloading the image resizing to JS (in this case @julianshapiro's Velocity.js) because browsers can't transition an element and retain the object-fit appearance simoultaneously.

It also addresses calculating offset and scale values based on the true size of the image, rather than the cropped (rendered) dimensions. Does break a few things like inline images, though :grin:

Check it out and let me know what you think: http://github.com/ROUND/enhance.js.