I’m trying to achieve the same effect as this natively in Pinegrow with Pinegrow custom animation, can anyone tell me how I can do it (or hints) please?
I know how to to rollover and zoom but the tricky bit is zooming exactly wherever I rollover the image.
Specifically the last example “Internal zoom on click”.
Also I need a few thumbnails that change the zoom(able) image which I’m guessing I just change the image source.
I’m not sure if this is what you’re looking for:
Not quite the functionality but that’s a good resource and I may be able to rework it, thank you.
I was hoping that I could use pinegrow interactions so I could perfect the animation to exactly what I need without coding too much.
Here is another example of the exact functionality I am after. Note, when you rollover the image is zooms in place wherever the pointer is but allows you to navigate the whole image when moving over it. Also it has other images on the left side that replace the “zoomable” image.
I can achieve the clicking on the left hand images replacing the image in the larger image rectangle but I don’t know how to achieve the zoom rollover other than it zooming in place (not allowing the user to explore the whole image zoomed in).
I guess it’s a mathematical solution because if your pointer is 30% across the rectangle and 10% down then the position of the image will be relative to the position of the pointer. Just like if you go all the way to the top of the rectangle, then the image top is aligned to the top of the rectangle (if that makes sense).
I’m not agains adding custom javasctipt and css but thought it might be possible in interactions so I can tweak the perfect user experience without code. See the link I was referring to below…
I think this hasn’t been solved so I’m going to submit my solution here.
For this functionality you just have to think about the process step by step.
Explaining the process will be pretty long so I’ve attached the example. BTW I’ve not added image change functionality in this example.
If there is anything do let me know.
Explaining the process in short
This may not explain in detail but if you check it with the project it should be more clear
First add click interaction to activate zoom
Add another click interaction to deactivate zoom
Now add interaction for rollover X, trigger should be Mousemove > Animate X position
Similar thing for rollover Y, add interaction and trigger should be Mousemove > Animate Y position
If there is anything, do let me know.
Hi @abirana,
THanks for doing this and explaining! One thing to add - this tripped me up. For the zoom-out and two roll-over interactions, make sure to go under the advanced options and select “has class” for the trigger condition and “active” for the trigger condition value. That way those animations only are active if the first zoom-in animation has been run first.
Cheers,
Bob
That is fantastic, thank you so much for doing this - it is very much appreciated, I’m going to try it now.
Thanks for the heads up Rob
Thanks to everyone who shared how to zoom in on a clearer photo.
