jQuery Image Viewer with Zoom and Rotate – Magnify

The Magnify is a cross-browser (support IE7+) and responsive jQuery image Viewer with zoom and rotate to show images in most attractive way. It provides smooth zoom, image rotation, maximize, close, drag and resize functionality.

Moreover, it comes with three built-in themes, you can fully configure & customize it with its available options.

Plugin Overview

Plugin: Magnify
Author: Zongbin
Licence: MIT Licence
Published: June 1, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Font Awesome 4
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 47.1 KB

Main Features

  • The lightbox is fully dragable, resize-able, maximize-able and moveable.
  • Support image rotation and smooth zoom.
  • Can be navigate using keyboard (arrow) keys.
  • Support full screen mode.
  • Fully responsive and cross browser.

Package Installation

You can install the plugin via npm

$ npm install jquery.magnify --save

or via bower

$ bower install jquery.magnify --save

How to Build Image Viewer with Zoom & Rotate

1. First of all load the jQuery and Font Awesome (for icons) into your HTML document to getting started with Magnify.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

2. After that, load the Magnify‘s CSS and JavaScript files.

<!-- Magnify Image Viewer CSS -->
<link href="css/jquery.magnify.css" rel="stylesheet">

<!-- Magnify Image Viewer JS -->
<script src="js/jquery.magnify.js"></script>

3. Create a basic gallery structure for images in HTML.

      <div class="image-set m-t-20">
        <a data-magnify="gallery" data-src="" data-caption="Slipping Away by Jerry Fryer" data-group="a" href="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_z.jpg">
          <img src="https://farm1.staticflickr.com/313/31812080833_297acfbbd9_s.jpg" alt="">
        </a>
        <a data-magnify="gallery" data-src="" data-caption="Mi Fuego by albert dros" data-group="a" href="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_z.jpg">
          <img src="https://farm4.staticflickr.com/3804/33589584740_b0fbdcd4aa_s.jpg" alt="">
        </a>
        <a data-magnify="gallery" data-src="" data-caption="Winter Fairytale by Achim Thomae" data-group="a" href="https://farm1.staticflickr.com/470/31340603494_fb7228020d_z.jpg">
          <img src="https://farm1.staticflickr.com/470/31340603494_fb7228020d_s.jpg" alt="">
        </a>
      </div>

4. Finally call the plugin in jQuery document ready function with default options.

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

Advance Configuration Options for Magnify Image Viewer

The following are some advance configuration options to create / customize “jQuery image viewer with zoom & rotate”.

Option Description, Default, Type
dragable , resizeable & movable

These options enable / disable modal dragging, resizing and moving functionality respectively. Default: true, Type: Boolean.

$("[data-magnify=gallery]").magnify({
   draggable: true,
   resizable: true,
   movable: true
});
keyboard

Allow control with keyboard. All keyboard controls are similar to Windows photo viewer. Default: true, Type: Boolean.

$("[data-magnify=gallery]").magnify({
   keyboard: true,
});
title

Decide weather to show title for the image on th top of modal window. Default: true, Type: Boolean.

$("[data-magnify=gallery]").magnify({
   title: true
});
modalWidth & modalHeight

Define the minimum width and height property for modal. Defult: 320, Type: Number.

$("[data-magnify=gallery]").magnify({
   modalWidth: 320,
   modalHeight: 320,
});
minRatio & maxRatio

Define the minimum and maximum ratio to show image in modal. Default: 0.05 and 16 respectively. Type: Number.

$("[data-magnify=gallery]").magnify({
   minRatio: 0.05,
   maxRatio: 16
});
ratioThreshold

Define the image zoom ratio threshold. Default: 0.01, Type: Number / float.

$("[data-magnify=gallery]").magnify({
   ratioThreshold: 0.01,
});
icons{}

This object define the set of options for icons. Type: Object. All default settings are in example.

$("[data-magnify=gallery]").magnify({
   icons: {
   		  minimize: "svg",		 //The minimize icon.
		  maximize:	"svg",		 //The maximize icon.
		  close: "svg",			 //The close icon.
		  zoomIn:"svg",			 //The zoomIn icon.
		  zoomOut:	"svg",		 //The zoomOut icon.
		  prev:	"svg",			 //The prev icon.
		  next:	"svg",			 //The next icon.
		  fullscreen:	"svg",	 //The fullscreen icon.
		  actualSize:	"svg",	 //The actualSize icon.
		  rotateLeft:	"svg",	 //The rotateLeft icon.
		  rotateRight:	"svg",	 //The rotateRight icon.
		  }
});

Magnify Image Viewer Callback Functions

The following are some useful callback functions to execute on different magnify events.

$("[data-magnify=gallery]").magnify({
  callbacks: {
    beforeOpen: function(el){
      // code to execute before modal is opened
    },
    opened: function(el){
      // code to execute after modal is opened
    },
    beforeClose: function(el){
      // code to execute before modal is closed
    },
    closed: function(el){
      //code to execute after modal is closed
    },
    beforeChange: function(index){
      // code to execute before image is changed
      // The arguments is the current image index of image group
    },
    changed: function(index){
      // code to execute image is changed
      // The arguments is the next image index of image group
    }
  }
});