Image magnification on hover

You might have images in your site that are filled with intricate details — for instance, product photos or artwork. With a little custom code, you can give your visitors the power to hover over and magnify portions of these images — and they won’t even have to lift a finger to do it. 

In this lesson you’ll learn how to magnify your images by adding custom code to a page or a project doing the following: 

1. Paste the custom code
2. Add a class name
3. Style the magnifier
   

‍

<script type="text/javascript" src="https://assets.website-files.com/5e2755779d8b8ea1d6373797/5ea88e92dce9b4b66f165490_zoom.txt"></script>
<script>
  jQuery(function(){
 
   if(!$.fn.imagezoomsl){
 
      $('.msg').show();
      return;
    }
    else $('.msg').hide();
 
    // plugin initialization
    $('.image').imagezoomsl({
 
      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [150, 150],
      // disables the scrolling of the document with the mouse wheel when the cursor is over the image
      disablewheel: false
    });
  });
</script>

Copy codeCopied!

‍

Paste the custom code

There are two ways you can paste the custom code into your project: 

• Add the code to the entire project
• Add the code to an individual page

To paste the code into your entire project:

1. Go to your project’s Settings
2. Choose the Custom code tab
3. Paste the code into the Footer code section (e.g., “Before </body> tag”)
4. Click Save changes
   

Note: You can paste the code into your project using shortcut keys Command + V (on Mac) or Control + V (on Windows).

To paste the code into an individual page: 

1. Open the Designer
2. Open the Pages panel and click the page settings cog icon of the page you want to affect
3. Scroll down to the Custom code section of the page settings
4. Paste the code into the Before </body> tag section
5. Click Save
   

Note: You can paste the code into your project using shortcut keys Command + V (on Mac) or Control + V (on Windows).

You've successfully pasted the custom code into your project!

Add a class name

Let’s add a unique class name to the images we want to receive the magnification effect:

1. Select the Image you want to magnify
2. Open the Style panel and click into the Selector field
3. Give it a class (e.g., “Magnify”) 

Let’s add the “Magnify” class to our code: 

1. Open the Pages panel and click the page settings cog icon of the page containing your custom magnifier code
2. Scroll to the Before </body> tag section in your page’s settings
3. Replace “.image” with your class name (eg., “.magnify”) 
4. Click Save

<script type="text/javascript" src="https://assets.website-files.com/5e2755779d8b8ea1d6373797/5ea88e92dce9b4b66f165490_zoom.txt"></script>
<script>
  jQuery(function(){
 
   if(!$.fn.imagezoomsl){
 
      $('.msg').show();
      return;
    }
    else $('.msg').hide();
 
    // plugin initialization
    $('.image').imagezoomsl({
 
      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [150, 150],
      // disables the scrolling of the document with the mouse wheel when the cursor is over the image
      disablewheel: false
    });
  });
</script>

Copy codeCopied!

‍Pro tip: Instead of recreating or duplicating classes within an existing project, you can use a Global class or a Combo class to create a unique class for images you want to magnify. Just make sure your unique magnification class name has been added to your custom code following the steps above. Read more about Global classes and Combo classes. 

Publish your project and visit your live site to see your custom code in action. Hover over the image you’ve added the class name to (e.g., images with the class name “Magnify”) and you’ll see a magnifier following your mouse position as you move it over the image. 

Style the magnifier

By default, the magnifier is a 150 by 150 pixel square shape. Let’s change its size and shape, and give it a drop shadow. 

Out of the box, our custom code sets the magnifier size to 150 by 150 pixels. Let’s make it larger:

1. Open the Pages panel and click the page settings cog icon of the page containing your custom magnifier code
2. Scroll to the Before </body> tag section in your page’s settings and locate the “magnifiersize: [150, 150]” section of code
3. Change each 150 pixel value to a larger value (e.g., 300 pixels for each)
4. Click Save

<script type="text/javascript" src="https://assets.website-files.com/5e2755779d8b8ea1d6373797/5ea88e92dce9b4b66f165490_zoom.txt"></script>
<script>
  jQuery(function(){
 
   if(!$.fn.imagezoomsl){
 
      $('.msg').show();
      return;
    }
    else $('.msg').hide();
 
    // plugin initialization
    $('.image').imagezoomsl({
 
      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [150, 150],
      // disables the scrolling of the document with the mouse wheel when the cursor is over the image
      disablewheel: false
    });
  });
</script>

Copy codeCopied!

Let’s change the magnifier shape from a square to a circle by setting a style foundation on a new Div block: 

1. Open the Navigator and select the Body element
2. Use Quick find to add a Div block as the last element on the page
3. Select the Div block, open the Style panel and click into the Selector field
4. Give the Div block a class name so the custom code can recognize the new magnifier shape (e.g., “round-loope”)
5. Open Style panel > Borders and set a Radius of 50% 

The Div block may appear oval at this point, but the custom code controls the size of the magnifier — the 300 pixels you set earlier.

Pro tip: Press Command + E (on Mac) and Control + E (on Windows) to open Quick find and quickly add elements to your project. 

To give the magnifier more dimension, let’s add a drop shadow behind it:

1. Select the Div block
2. Open Style panel > Effects
3. Add a Box shadow by clicking the plus icon, and style the shadow to your liking

Because our “round-loope” Div block is only being used to affect our magnifier’s styling, we don’t actually want the Div block to be visible on our page. Let’s hide it from view: 

1. Select the “round-loope” Div block
2. Open Style panel > Layout
3. Set Display to none 
4. Publish the project and visit your site to preview the newly styled magnifier

The magnifier also works on mobile devices. You can tap on the image to get a closer look when using devices like tablets and smartphones. 

Congratulations! You’ve just magnified your images’ possibilities!