jonom/jquery-focuspoint

Add zoom support

Closed this issue · 6 comments

jcorreia commented

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

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:

  • multiply the offset (absolute position) of the image 5x
  • change height or width on uncropped axis from 100% to 500%
  • set an offset on the normally uncropped axis

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

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

BenjaminBeck commented

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

@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

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

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.