Reveal content automatically when zoomed to an element

[tonye]

My goal is that after zooming in, new content will fade in, and upon zooming out, the original content will fade back in. The idea being that you are clicking on a title button, which zooms in to become the content.

I am having trouble figuring out how to setup a callback event for zooming out. Zooming in has the animationendcallback, but when zooming out, the animationendcallback is not called. How can I bind to an event or something to call a custom function on the element that's losing focus?

P.S. The callback(s) would need to work for 3 situations while zoomed in:

1. Clicking on the zoomed in element a 2nd time (closeclick: true) to zoom out.
2. Clicking outside the zoomed element to zoom out.
3. Clicking on another element when already zoomed in on one, thus moving to a new element.

[ghost]

did you ever figure this out? i'm trying to do the very same thing.

[tonye]

Nope, I ended up using a different plugin called Roundabout, instead of Zoomooz.

[ghost]

can you tell me how you achieved a zooming effect like zoomooz with this plugin? i took a look and can't determine how it's done. thanks in advance :)

[tonye]

Sorry, did not achieve a zooming effect with it, just decided on a different effect entirely, so it's not a replacement for the zooming effect, it is just the alternative I took. Sorry

[ghost]

no problem, thanks anyway. i'll keep at it.

[jaukia]

The current functioning of "animationendcallback" is that it is called when an animation ends. This can be interrupted by starting a new animation and in this case the "animationendcallback" is never called for the new animation.

I wonder what would be the ideal functioning of this?

[ghost]

for our purposes, an additional callback is needed after zooming out as much as it is after zooming in. i have a very interactive page i'm working on with many different zoomable objects, and each object has two different states (on/off). i apply the zoom in callback to affect the state change, but zooming out leaves me having to use a large volume of javascript in order to detect these state changes using classes and ugly unbinding/re-binding, whereas a simple callback would be much cleaner. is there any chance you can go about adding this feature, or at least informing us of how we can modify the source code to accomplish this?

[jaukia]

If you are defining the zoom effects with javascript (using $.zoomTo(...)), then you can assign animationendcallback to both the zoomTo on the element and on the zoomTo for the parent (which zooms out from the element).

If you are using zoomTarget code, then you ought to be able to add animationendcallback to the parent of the zoomTarget (zoomContainer or body element) as well as to the zoomTarget

It would be good if I made an example of this. I'm not sure however when I'll have to work on an example.

[ghost]

i'm using zoomtarget via javascript, which causes the object to be zoomed out when a user clicks outside of the object - this is fine. if i place a zoomtarget event on the containing div, this would cause zoomooz to zoom in when its clicked, which i don't want. i only want it to act as the area which zooms the user out, therefore adding zoomtarget with a callback in this case wouldn't work for me.

[jaukia]

I could add an attribute to zoomTarget elements, which would be the element that is displayed when zoomed in to the target. Syntax could be something like this:

This will be shown when zoomed into.

Or even just:

This will be shown when zoomed into.

How would you feel about this?

-janne

On 22 February 2013 21:16, mhilland notifications@github.com wrote:

i'm using zoomtarget via javascript, which causes the object to be zoomed out when a user clicks outside of the object - this is fine. if i place a zoomtarget event on the containing div, this would cause zoomooz to zoom in when its clicked, which i don't want. i only want it to act as the area which zooms the user out, therefore adding zoomtarget with a callback in this case wouldn't work for me.

— Reply to this email directly or view it on GitHubhttps://github.com/jaukia/zoomooz/issues/51#issuecomment-13966061.

[ghost]

i believe that should solve my problem, seeing as i'd then be able to apply a callback to the element which zooms the user out, right?

[ghost]

jaukia, i'm working on this project again and really need this functionality. can you provide me with an example of your solution?

[jaukia]

Unfortunately, I haven't had time to implement the feature. Currently, the only way to do this is with Javascript, but it requires some understanding on how to handle all the events and revealing/hiding of all the items.

The basic idea is that you add something like this:

$(".item").click(function() {
    $(this).zoomTo();
    $(this).find(".content").fadeIn();
});