Zoomable & Rotatable Image Viewer Plugin - jQuery Magnify

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

The plugin is no longer maintained. Use the Responsive Feature-rich Photo Viewer Plugin For jQuery instead.

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.
  • Mobile friendly.
  • 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: {
    minimize: 'fa fa-window-minimize',
    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',
    loader: 'fa fa-spinner fa-pulse'
  },

  // language
  i18n: {
    minimize: 'minimize',
    maximize: 'maximize',
    close: 'close',
    zoomIn: 'zoom-in(+)',
    zoomOut: 'zoom-out(-)',
    prev: 'prev(←)',
    next: 'next(→)',
    fullscreen: 'fullscreen',
    actualSize: 'actual-size(Ctrl+Alt+0)',
    rotateLeft: 'rotate-left(Ctrl+,)',
    rotateRight: 'rotate-right(Ctrl+.)'
  },

  // enable multiple instances
  multiInstances: true,

  // default trigger event
  initEvent: 'click',

  // enable animation
  initAnimation: true,

  // the modal size will be fixed when change images
  fixedModalPos: false,

  // z-index
  zIndex: 1090,

  // css selector of drag handler
  dragHandle: '.magnify-modal',

  // callback functions
  callbacks: {
    beforeOpen: $.noop,
    opened: $.noop,
    beforeClose: $.noop,
    closed: $.noop,
    beforeChange: $.noop,
    changed: $.noop
  }

});

Changelog:

2018-12-08

  • v1.4.0

2018-11-26

  • Fixed image scale issue

2018-10-19

  • Add svg icons & remove font-awesome

2018-08-15

  • v1.1.0: Add IE8 rotating support

2018-07-19

  • Fixed preloader icon bug on Firefox

2018-05-20

  • v1.0.0: Fixed image z-index issue with other dialog; Added new callbacks

2018-05-19

  • v0.8.1: Fixed image position issue when resizing modal

2018-04-16

  • v0.8.0: Add dragHandle option

2018-03-25

  • v0.7.0

2018-03-06

  • change option ImgWithModalFixed to fixedModalPos

2018-03-03

2018-03-03

  • v0.6.3: Fixed image numerical accuracy issue; Add fullscreen default background-color; code improvement.

2018-02-24

  • v0.6.2: Add minimize btn & small fix

2018-02-04

  • v0.5.0: Modified details when change images & small fix

2018-01-27

  • v0.4.1: Add static constants

2018-01-25

  • v0.4.0: Add mobile support; Fixed 'click' issue on mobile

2018-01-20

  • Fixed overflow page bug

2018-01-19

  • Fixed grabbing cursor issue

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.