jQuery Image Zoom In Zoom Out On Click

The “Zoom.js” is a super lightweight plugin for creating jQuery Image Zoom In Zoom Out On Click event within the content. It is easy to use and supports multiple browsers.

It’s a simple jQuery Zoom image on click plugin that provides a smooth Zooming effect on clicking an image. The Fat Zoom plugin works as an image lightbox with some additional features.

You can easily implement it on any kind of project without writing too many codes. It also works well on smartphones and desktop devices.

If you are looking for a Javascript solution that works on hover then check out our previous tutorial about creating Zoom Image Gallery On Hover.

Furthermore, the plugin normally works when the user clicks on an image, it will Zoom out and when they click again it will Zoom-in. But if you hold your meta key (⌘ on mac) or (ctrl on windows), it will open in a new tab. wow.

In addition, the plugin dependent on the transition.js file from Bootstrap to provide the smooth Zooming experience. So you make sure to add this file as well to make work the plugin.

Another great thing is that you don’t need to add the different sizes of images for a larger view. All you need to define one image by using the img tag and everything else plugin will do automatically.

How to Create jQuery Image Zoom In / Out On Click

The plugin is dependent on the jQuery and Bootstrap transition so you need to load both the files into your HTML document to get started with the implementation.

<!-- 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>

After that, we will include the plugins files. So let’s add the zoom‘s CSS and JavaScript files on your webpage.

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

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

Now you need to define the markup which is dead simple and all you need to define the img tag and place your image path in the src.

By just defining the data-action attribute to your image you can easily activate the zoom effect.

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

The Stylesheet

With the help of the CSS, you can easily customize the Zooming animation. You can add the different transition to the image wrapper and container to achieve a unique effect.

Similar, you can design the background overly differently by customizing the zoom-overlay.

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

I hope you like this plugin. Let me know in the below comments how useful its for you.