Image Magnify Glass Effect With jQuery And jQuery UI - jfMagnify

File Size: 134 KB
Views Total: 5022
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">

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


5. Available options to customize the magnify glass effect.


  // center the magnify glass effect
  center: true,

  // initial scale level

  // container element

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

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

// increase or decrease the scale of the magnified element

Change log:


  • bugfix



  • bugfix


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



  • bugfix

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