Create a Magnifying Glass Effect with OKZoom jQuery Plugin

Would you like to allow your users to use a “magnifying glass” to zoom in and see your site’s images in detail?

A magniying glass effect is really popular in ecommerce sites, because it allows customers to see all the close-up details before they buy.

In this tutorial, I’m going show you how to use the OKZoom jQuery plugin, the easiest way to create a circular zoom effect for your images.

Step #1. Download OKZoom jQuery plugin

• Go to jQuery OKZoom plugin’s repository and click the “Download zip” button.

• Decompress the file.
• Look for the okzoom.min.js file.
• Upload the file to your site.

Step #2. The HTML

Let’s add an image with the following example code:

<img id="zoom" alt="" src="path/to/image.jpg" style="width:600px; height:auto;" />

In the code above we defined these elements:

• id value. In this case is “zoom”.
• A smaller width and height.
  • For example: if the image width is 1200 pixels, I set as 600px and leave the height as auto.

Step #3. The Javascript

Inside the head tag, load the code below in the exactly this order:

jQuery:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery OKZoom plugin:

<script src="path/to/okzoom.min.js"></script>

Execute the plugin, adding a custom width and height for the zoomed area:

<script>
$(function(){
$('#zoom').okzoom({
width: 200,
height: 200
});
});
</script>

Optionally, you can also define other parameters such as these:

• round: true
• background: “#fff”
• backgroundRepeat: “repeat”
• shadow: “0 0 5px #000”
• border: “1px solid black”

Step #4. The end result

Open your site in a browser to see the end result. This should work in Joomla, WordPress, Drupal or any other CMS.

View demo