Image Magnify Glass Effect With jQuery And jQuery UI - jfMagnify

File Size: 134 KB
Views Total: 5044
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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:

2018-02-09

  • bugfix

 

2016-03-13

  • bugfix

2016-03-12

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

2016-03-10

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.