jQuery Image Viewer with Zoom and Rotate

jQuery Image Viewer with Zoom and Rotate - Magnify
Code Snippet:Magnify
Author: Zongbin
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 15,686
License: MIT
Edit Code online: View on CodePen
Read More

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”.

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 the keyboard. All keyboard controls are similar to Windows photo viewer. Default: true, Type: Boolean.

$("[data-magnify=gallery]").magnify({
   keyboard: true,
});
title Decide whether to show the title for the image on the top of the modal window. Default: true, Type: Boolean.

$("[data-magnify=gallery]").magnify({
   title: true
});
modalWidth & modalHeight Define the minimum width and height property for the modal. Default: 320, Type: Number.

$("[data-magnify=gallery]").magnify({
   modalWidth: 320,
   modalHeight: 320,
});
minRatio & maxRatio Define the minimum and maximum ratio to show the image in the 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 defines the set of options for icons. Type: Object. All default settings are in the 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
    }
  }
});

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.

1 thought on “jQuery Image Viewer with Zoom and Rotate”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X