Zoomable & Rotatable Image Viewer Plugin - jQuery Magnify

Zoomable & Rotatable Image Viewer Plugin - jQuery Magnify

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.
  • 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 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 
  toolbar: ['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
  lang: 'en',
  // i18n strings here
  i18n: {}
});

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

  • Publication date: 23.12.2017
  • Source