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

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Fat zoom.js
Author:	Fat
Licence:	MIT Licence
Published:	January 17, 2024
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

Demo Download

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;
}

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.