search

jonom / jquery-focuspoint

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.
Other
3.15k stars 211 forks source link

Add zoom support #17

Closed jcorreia closed 8 years ago

jcorreia commented 9 years ago

Hi, fantastic project you have here. Thanks :)

I need to zoom automatically an image on load doing zoom out from the focal point. Is there a way to do this with focal point or thru jquery ?

Thanks, Jorge Correia

jonom commented 9 years ago

I'm sure it could be done but I think zooming from the focuspoint would mean modifying the plugin. Usually FocusPoint fills a container with image so the image is only cropped on one axis. Zooming would mean cropping on both axis so to get for example a 5x zoom of the image with focus point maintained I guess you would need to:

You could probably take care of the zoom animation with css-transitions.

If however you just wanted to zoom in/out from the centre of an image cropped with FocusPoint you could probably do that fairly easily by scaling with css transforms within a div that has overflow set to hidden.

If you work out how to do this please post your results.

jcorreia commented 9 years ago

Hi, thanks for your answer. I wish I could do that but it´s too much css for me :) Thanks

BenjaminBeck commented 8 years ago

I started something similar some time ago (but never finished ..). The right way to do this is to use matrice calculations: http://de.mathworks.com/help/images/performing-general-2-d-spatial-transformations.html

jonom commented 8 years ago

@BenjaminBeck yikes that maths looks a little difficult for me :) I made a proof of concept for someone once with the zoom by css-transforms built in, I will probably include it in the next release.. but might be a while still!

manng commented 8 years ago

jquery.focuspoint.adjustFocusScale.txt Is this question still relevant? I have written a version of the adjustFocus() function which applies a zoom centred on the Focus Point, using css transforms. I attach the code. It assumes the user has set up the scale using data attributes named scaleX and scaleY.

I am using focuspoint in an image management tool I am working on and zooming like this is required.

jonom commented 8 years ago

Zooming is supported through CSS transforms in v2 which is under development. See an example in the v-2-dev branch under demos/test/index.html.