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

jQuery image Zoom in Zoom out on Click - fat zoom.js
Code Snippet:
Author:
Published: January 17, 2024
Last Updated: January 22, 2024
Downloads: 17,176
License: MIT
Edit Code online: CodeHim
Read More

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

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

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