Image Magnify Glass Effect With jQuery And jQuery UI - jfMagnify

jfMagnify is a very small jQuery plugin for creating a magnify glass effect to enlarge your images through drag and drop based on jQuery UI.

More Examples:

• Basic
• magZone
• scale

How to use it:

1. Include the necessary jQuery and jQuery UI libraries on the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.js"></script>

2. Download the plugin and the include the jquery.jfMagnify.min.jsscript after jQuery library.

<script src="jquery.jfMagnify.min.js"></script>

3. Add the image you want to magnify as follows:

<div id="window" class="magnify">
  <div class="magnify_glass"></div>
  <div class = "element_to_magnify">
    <img src="img.jpg" draggable="false">
  </div>
</div>

4. Call the plugin on the wrapping element to active the magnify glass effect.

$(".magnify").jfMagnify();

5. Available options to customize the magnify glass effect.

$(".magnify").jfMagnify({

  // center the magnify glass effect
  center: true,

  // initial scale level
  scale:2,

  // container element
  containment:element,

  // CSS classes for the magnify glass effect
  magnifyGlass : '.magnify_glass',
  magnifiedElement: '.magnified_element',
  magnifiedZone:'.magnify_glass',

  // element to magnify
  elementToMagnify : '.element_to_magnify',
  
});

6. You can also apply the options to the magnify glass effect via Html5 data attributes:

<div class="magnify" 
     data-center = "true"
     data-scale ="2"
>
...

7. API.

// destroy the plugin
$(".magnify").data("jfMagnify").destroy();

// increase or decrease the scale of the magnified element
$(".magnify").data("jfMagnify").scaleMe(5);

Change log:

 

2016-03-13

• bugfix

2016-03-12

• Added a bit to make sure the images are not draggable

2016-03-10

• update

2016-02-17

• bugfix

---

This awesome jQuery plugin is developed by fonstok. For more Advanced Usages, please check the demo page or visit the official website.