| Coding Tutorials
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

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

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:


<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:

        width: 200,
        height: 200

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.

okzoom jquery plugin zoom

View demo

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.