jQuery image Zoom in Zoom out on Click – fat zoom.js

A lightweight, easy to use and cross-browser image zooming plugin for jQuery. Fat zoom.js a jQuery image zoom in zoom out on click event based plugin that smoothly zoom image. It works just like an image lightbox with some awesome feature. Normally, it zoom image when clicked, but if you hold (⌘ on mac) or (ctrl on windows) and click the image will be open in new tab.

Plugin Overview

Plugin: Fat zoom.js
Author: Fat
Licence: MIT Licence
Published: May 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.11.0 or Latest version and Bootstrap 3 or 4 (transition.js file only)
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 662 KB

How to Use jQuery image Zoom in / out on Click Plugin

1. Load the jQuery and Bootstrap Js into your HTML document to getting started with fat zoomm.js.

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

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

2. After that, also include zoom‘s CSS and JavaScript files in your webpage.

<!-- Zoom CSS -->
<link rel="stylesheet" type="text/css" href="css/zoom.css">

<!-- Zoom Js -->
<script src="js/zoom.js"></script>

3. Add the data-action attribute to your images that you want to zoom. The markup syntax are:

<p>
   <img src="path/to/image.jpg" data-action="zoom">
</p>

Note: The plugin will auto initialized after including its all assets.

4. If you want to customize the wrapper and container of the image, use the following mentioned CSS classes to customize the styles.

img[data-action="zoom"] {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
.zoom-img,
.zoom-img-wrap {
  position: relative;
  z-index: 666;
  -webkit-transition: all 300ms;
       -o-transition: all 300ms;
          transition: all 300ms;
}
img.zoom-img {
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
}
.zoom-overlay {
  z-index: 420;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  filter: "alpha(opacity=0)";
  opacity: 0;
  -webkit-transition:      opacity 300ms;
       -o-transition:      opacity 300ms;
          transition:      opacity 300ms;
}
.zoom-overlay-open .zoom-overlay {
  filter: "alpha(opacity=100)";
  opacity: 1;
}
.zoom-overlay-open,
.zoom-overlay-transitioning {
  cursor: default;
}