jQuery Image Viewer with Zoom and Rotate

The Magnify is a cross-browser (support IE7+) and responsive jQuery image Viewer with zoom and rotate to show images in the 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.

Code Features

• The lightbox is fully draggable, resizeable, maximize able, and moveable.
• Support image rotation and smooth zoom.
• Can be navigated 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 get 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 the jQuery document ready function with default options.

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

Advanced Configuration Options

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

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

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

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

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

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

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

$("[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
    }
  }
});

That’s all! hopefully, you have successfully created an image viewer with a zoom and rotate feature. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.