jQuery Image Zoom In Zoom Out On Click

Category: | October 12, 2019
Author: fat
Official Page: Go to Website
Last Update: October 12, 2019
License: MIT
jQuery Image Zoom In Zoom Out On Click

The “Zoom.js” is a super lightweight jQuery plugin for creating image Zoom in & Zoom Out on click event within the content. It is easy to use and supports multiple browsers.

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

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

Furthermore, the plugin normally works when 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 different size of image 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 hep of the CSS you can easily custoimze the Zooming animation. You can add the different transition to the image wrapper and container to achive the unique effect.

Similar, you can design the background overly diffrently 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;
}

Hope you like this plugin. Let me know in below comments how useful its for you.

You May Also Like