Jump to content

image 'pan' on hover zoom

Recommended Posts

I have found the right code to zoom my images on hover easy enough. I am, however, struggling to figure out how to make the zoom point follow the curser as you move it across the image.

here is an example of what i am after: https://t-o-o-g-o-o-d.com/carhartt-wip

Any ideas or help would be very much appreciated!

Claudia

Edited by ClaudiaSurrage
Initial Revision
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Hi Claudia,

You can do this with the Magic Zoom extension for Squarespace:

https://www.magictoolbox.com/magiczoom/modules/squarespace/

After installing it, set the zoom position to inner. The code would look similar to this:


<a href="large.jpg" class="MagicZoom" data-options="zoomPosition: inner"><img src="small.jpg"></a>

David

Edited by Magic Toolbox
Initial Revision
Link to comment
  • 8 months later...

I've been trying to figure this out too. I don't know much about coding, but what I discovered is this...

1. Such a feature requires HTML, CSS, AND Javascript 

2. Need Premium account to embed Javascript or iframes. Basic plan only allows you to add custom CSS or use the code block for HTML and CSS.

My needs don't require all that the premium plan offers so I gave up on this feature. However, if you DO have the premium plan this tutorial may help: https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp

If you do NOT have the premium, the work around I ended up using based on my needs is just copying the image address and linking the image to open to a new window when clicked on which allows zooming. 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.