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:

  1. 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.
  2. 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).
  3. 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”.
  4. 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):

<a onclick=”javascript:false” href=”https://www.jadaktech.com/wp-content/uploads/2017/05/Machine-Vision-Campaign-Landing-Page_Tube-Illustration_high-01.jpg”><img width=”747″ height=”432″ class=”size-full wp-image-9154 aligncenter zoom” alt=”Machine Vision Zoom” src=”https://www.jadaktech.com/wp-content/uploads/2017/05/Machine-Vision-Campaign-Landing-Page_Tube-Illustration_low-01.jpg” /></a>

 

Help Topics: