Hover Over Zoom
Author: Alex Morales
Visited 1233,
Followers 2,
Shared 0
I am attempting to create a shopping cart with an Amazon-like feature where if you hover over the image, a magnifying glass appears that greatly zooms in on the image. COuld anyone help me with getting this feature on my website?
Posted on the
Hello Alex,
The closest you will get using the tools built-in to WebSite X5 is to make use of the 'Automatically enlarge and move the Image' Display Mode, in the Image Object properties. There are several different settings which you can play around with. Although it is relatively easy to zoom in (with high magnification) on an image, the magnifying glass metaphor is unavailable.
You could insert custom code (most probably jQuery) if you can find a plugin on the net which provides this type of functionality.
It is not too difficult to use your own code within WebSite X5 although you do have to be diligent and read any plugin instructions carefully.
But I am afraid there is no out-of-the-box 'magnifying glass' feature in WebSite X5.
Kind regards,
Paul
PS: a quick search on Google yielded the following results, for example:
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
http://www.tripwiremagazine.com/2012/07/jquery-zoom-effects.html
At first glance they look very promising!
Hi
it is possible to add this to your x5 project using custom code, I will work on it and post a tutorial shortly.
regards
jamie
Author
Thank you very muich!
I was looking to use this feature in a gallery and it appears that there is only an option for that if I upload a single image. Any thoughts on how I could do this?
Hi
there may be one option but I will test it out first before I confirm it.
Regards
jamie