How to Add Magnifying Glass / Zoom Functionality to Pages
Some pages, we may want to add a magnifying glass functionality (zoom) to view product images larger, here is how that can be added:
- Add an image of normal size to your page (e.g. less than 700px in width) – make sure you have a very large version of that image, we will use that shortly.
- Add a link to the image that links to that larger image. (click the pencil icon when mousing over the image), then add a url that links to that larger image (more than 1500px in width minimally).
- Now edit the image again (mouse over image and click pencil icon) and then click the Advanced Settings dropdown. Next to Image CSS Class – add “zoom”.
- Now edit the page code and add the “onclick” code like below and you’re done.
Here are the important parts of the code (in red):
- Fixing 404 (Page not found) Errors
- How to Add Lightbox Lead Form to a Link
- How to Add Magnifying Glass / Zoom Functionality to Pages
- How to Change the Product (Sidebar) Menu
- How to download the conversion (lead) forms from the database
- How to Edit the Resources Pages
- How to Restart the Server
- How to SEO Optimize Product Pages
- How to Write New Posts / Pages for High SEO Rank
- NEW How to Reorder Products
- SEO Plugin Bug Fix – How to Edit Titles, Desc Tags (Related Items Issue)
- Skyetek – How to Update a Download File and Create Redirects