ClaudiaSurrage Posted September 27, 2019 Share Posted September 27, 2019 (edited) 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 September 27, 2019 by ClaudiaSurrage Initial Revision Link to comment
Magic Toolbox Posted September 28, 2019 Share Posted September 28, 2019 (edited) 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 September 28, 2019 by Magic Toolbox Initial Revision Link to comment
petunia4 Posted June 8, 2020 Share Posted June 8, 2020 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment