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:

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

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:

{codecitation}<script src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>{/codecitation}

jQuery OKZoom plugin:

{codecitation}<script src=”path/to/okzoom.min.js”></script>{/codecitation}

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

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

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

Instructor

  • 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
Blog Rating
Subscribe
Notify of
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
SimonW

Awesome ! Thanks !

htmgarcia

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

freshwebservices

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

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

best wishes,

rudi

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

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

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

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

Daniel

Libby

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

vaishali

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