Mobile-friendly Image Zoom Plugin - jQuery magnifik

magnifik is a tiny, cross-browser, mobile-friendly, fully configurable jQuery image zoom plugin for enlarging images in your webpage just like a popup.

How to use it:

1. Load the minified version of the magnifik plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/magnifik.js"></script>

2. Create a link that points to the large version of your image as follows:

<a class="example" href="large.jpg">
  <img src="thumb.jpg" />
</a>

3. Attach the function magnifik to the image link and done.

$('a.example').magnifik();

4. The default CSS classes to beautify & customize the plugin. For example, default close button class will be m-close. You can override the default CSS prefix inside options object as follows:

$('a.example').magnifik({

  // override default CSS prefix here
  classPrefix: 'm-',

  // override default CSS classes here
  classNames: {
    // applied to the stage element
    zooming : 'zooming', 
    // applied to the close button
    close : 'close', 
    // applied to the top-level element
    control: 'magnifikControl', 
    // applied to the DIV wrapper
    canvas: 'magnifikCanvas', 
    // applied to the thumb
    thumb: 'magnifikThumb', 
    // applied to the full size image
    full: 'magnifikFull'
  }
  
});

5. Set the ratio value by which the viewport width is multiplied to determine the zoomed in width. Default: 2.0.

$('a.example').magnifik({
  ratio: 1.5
});

6. Set the element inside which the zoomed in content should be rendered. Defaults to the document body.

$('a.example').magnifik({
  stage: undefined
});

7. More configuration options with default values.

$('a.example').magnifik({

  // Ascend DOM level from trigger element to find nearest image to use
  // as thumbnail. If set to false, no ascent would take place, and only
  // images within initial context will be considered.
  seekImage: true,

  // Whether clicking anywhere on zoomed in image will stop zooming.
  clickCloses: true,

  // Override to use alternate event for all magnifik control interactions.
  activationEvent: 'click',

  // Default style applied to canvas. Overriding replaces the whole object.
  canvasStyle: {
    position: 'absolute', 
    width: '100%', 
    height: '100%', 
    overflow: 'auto', 
    '-webkit-overflow-scrolling': 'touch'
  },

  // Default style applied to images within canvas. Overriding replaces the whole object.
  imageStyle: {
    position: 'absolute', 
    top: '0', 
    left: '0', 
    maxWidth: 'none', 
    maxHeight: 'none'
  },

  // Generator for HTML of zoomed in view. If overriding, you can call
  // the old function via Mobify.UI.Magnifik.defaults.stageHTML.call(this)
  stageHTML: function() {
    return '<div class="' + this._getClass('canvas') + '"><img class="'
    + this._getClass('thumb') + '"><img class="'
    + this._getClass('full') + '"></div>';
  },

  // Generator for global CSS (ignored if magnifik content injected into
  // non-body element). If overriding, you can call old function via
  // Mobify.UI.Magnifik.defaults.globalStyle.call(this)
  globalStyle: function() {
    var zooming = '.' + this._getClass('zooming');
    return zooming + ' { overflow: hidden; }'
      + zooming + ' > * { display: none !important; }'
      + zooming + ' > .' + this._getClass('control') + ' { display: block !important; }';
  }
  
});

8. API methods.

// Opens magnifik.
$('.element').magnifik('open');

// Closes magnifik.
$('.element').magnifik('close');

// Restores event handlers for the magnifik context.
$('.element').magnifik('bind');

// Removes event handlers from the magnifik context.
$('.element')..magnifik('unbind');

// Unbinds the events from the magnifik context, and removes it from the DOM.
$('.element').magnifik('destroy');

9. Event handlers.

$element.on('magnifik:opening', function(event) {
  // do something
});

$element.on('magnifik:open', function(event) {
  // do something
});

$element.on('magnifik:closing', function(event) {
  // do something
});

$element.on('magnifik:close', function(event) {
  // do something
});

---

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