Create a Magnifying Glass Effect with OKZoom jQuery Plugin

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:

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.

okzoom jquery plugin zoom

View demo

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
guest

9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
SimonW
8 years ago

Awesome ! Thanks !

htmgarcia
8 years ago
Reply to  Simon

Hi @SIMON,
I’m glad you like the tutorial 🙂
Regards

freshwebservices
freshwebservices
8 years ago

Perhaps a class would be better target rather than id in your example – since ids are meant to be unique & multiple images with the same id would be a problem. Otherwise, nice tutorial – thanks.

Rudi Butt
Rudi Butt
7 years ago

please, how do I upload the okzoom.min.js file to my site?

best wishes,

rudi

Анатолий Костяков
Анатолий Костяков
7 years ago

How to disable magnifier after click on another element instead image? Can you write a function or link. I have not found in docs.

Gonzalo
Gonzalo
7 years ago

Hello! Nice post, thank you so much!!! I’d like to know if it’s possible to amplify even more the zoom effect, and how it can be done. Thank you!

daniel-pickering
7 years ago
Reply to  Gonzalo

Hi Gonzalo,
You would want to download okzoom.js Rather than the mini version and edit it’s properties.
Thanks

Daniel

Libby
Libby
5 years ago

Hello! Thanks so much for this. I’m wondering if there is a way I can reduce the magnification strength?
Thanks very much.

vaishali
vaishali
5 years ago

when image rotate ,magnified glass(okzoom) property not working…..> it does not zoom as per rotated image

9
0
Would love your thoughts, please comment.x
()
x