Zoomable & Rotatable Image Viewer Plugin - jQuery Magnify

Zoomable & Rotatable Image Viewer Plugin - jQuery Magnify
File Size: 107 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Magnify is a simple and lightweight jQuery image viewer plugin used to display images in a zoomable, rotatable, draggable, and navigatable lightbox popup.

More features:

  • Fullscreen view.
  • Cross browser.
  • Allows to maximize and minimize the lightbox popup.
  • Responsive design.
  • Zoom on mouse wheel.
  • Font Awesome based icons.

How to use it:

1. Include the jQuery magnify plugin and other required resources on the web page.

<link href="dist/jquery.magnify.css" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery.magnify.js"></script>

2. Insert your images to the image viewer using the following attributes:

  • data-magnify="gallery": required attribute
  • data-caption: image caption
  • data-group: used for multiple instance on the page
  • data-src: if you want to use <img> tag instead of <a>
<a data-magnify="gallery" 
   data-caption="Image Caption 1" 
   data-group=""
   href="1.jpg">
  <img src="thumb-1.jpg" alt="">
</a>

<a data-magnify="gallery" 
   data-caption="Image Caption 2" 
   data-group=""
   href="2.jpg">
  <img src="thumb-2.jpg" alt="">
</a>

<a data-magnify="gallery" 
   data-caption="Image Caption 3" 
   data-group=""
   href="3.jpg">
  <img src="thumb-3.jpg" alt="">
</a>

<!-- OR -->

<img src="thumb-1.jpg" 
     data-magnify="gallery" 
     data-caption="Image Caption 1" 
     data-src="1.jpg">

<img src="thumb-1.jpg" 
     data-magnify="gallery" 
     data-caption="Image Caption 1" 
     data-src="1.jpg">

<img src="thumb-1.jpg" 
     data-magnify="gallery" 
     data-caption="Image Caption 1" 
     data-src="1.jpg">

3. Call the function magnify() and done.

$('[data-magnify=gallery]').magnify();

4. Possible plugin options to customize the image viewer.

$('[data-magnify=gallery]').magnify({

  // is draggable
  draggable: true,

  // is resizable
  resizable: true,

  // is draggable
  movable: true,

  // keyboard navigation
  keyboard: true,

  // shows titles
  title: true,

  // modal size
  modalWidth: 320,
  modalHeight: 320,

  // fixed content
  fixedContent: true,

  // fixed moda size
  fixedModalSize: false,

  // maximize the image viewer on init
  initMaximized: false,

  // threshold 
  gapThreshold: 0.02,
  ratioThreshold: 0.1,

  // min/max ratio
  minRatio: 0.1,
  maxRatio: 16,

  // toolbar options
  headToolbar: [
      'maximize',
      'close'
  ],
  footToolbar: [
      'zoomIn',
      'zoomOut',
      'prev',
      'fullscreen',
      'next',
      'actualSize',
      'rotateRight'
  ],

  // customize icons
  icons: {
      maximize: 'fa fa-window-maximize',
      close: 'fa fa-close',
      zoomIn: 'fa fa-search-plus',
      zoomOut: 'fa fa-search-minus',
      prev: 'fa fa-arrow-left',
      next: 'fa fa-arrow-right',
      fullscreen: 'fa fa-photo',
      actualSize: 'fa fa-arrows-alt',
      rotateLeft: 'fa fa-rotate-left',
      rotateRight: 'fa fa-rotate-right'
  },

  // language
  i18n: {
    maximize: 'maximize',
    close: 'close',
    zoomIn: 'zoom-in',
    zoomOut: 'zoom-out',
    prev: 'prev',
    next: 'next',
    fullscreen: 'fullscreen',
    actualSize: 'actual-size',
    rotateLeft: 'rotate-left',
    rotateRight: 'rotate-right'
  },

  // enable multiple instances
  multiInstances: true

});

Change logs:

2018-01-18

  • Add multiInstances option & Fixed cursor issue

2018-01-13

  • Add initMaximized option & small fix
  • Add grabbing cursor

2018-01-09

  • Bugfix

2018-01-08

  • Fixed grab cursor issue when resizable & rotatable

2018-01-05

  • Add grab cursor when modal resized

2018-01-04

  • Add i18n support & small fix

2018-01-02

  • Bugfix

2018-01-01

  • Add error handling callback when image is failed to load

2017-12-28

  • Add method to get scrollbar width

2017-12-26

  • Optimize the content fixed

2017-12-25

  • Improvement.

2017-12-24

  • Added more options

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