Smooth jQuery Image Zoom & Lightbox Plugin - zooomin

Smooth jQuery Image Zoom & Lightbox Plugin - zooomin
File Size: 7.78 KB
Views Total: 6208
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

zooomin is a jQuery plugin used to zoom in images and display them in a fullscreen, mobile-friendly lightbox, inspired by Smooth zoom in and zoom out animations based on CSS3 transitions.

How to use it:

1. Load jQuery library and the jQuery zooomin plugin's JavaScript & CSS files in your document.

<link href="zooomin.css" rel="stylesheet">
<script src="//"></script>
<script src="zooomin.js"></script>

2. Add the CSS class 'zooomin' to your images within the document.

<img class="zooomin" src="sample.jpg">

3. Call the function and the plugin will take care of the rest.


4. By default, the plugin will automatically close the image lightbox as you scroll down or up the webpage. You can turn off the functionality in the JavaScript as this:

  scrollClose: false

5. Override the default CSS styles of the background overlay for the image lightbox.

.zooomin .z-c:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #333;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear, opacity 0.3s;

6. Available callback functions.

  onClose:        false,
  onOpen:         false,
  onInit:         false

7. More configuration options.

  video:          false,
  videoWidth:     1920,
  videoHeight:    1080,
  videoAutoplay:  false,



  • Started with some refactoring and rendering improvements. Everything works as before for now.


  • added func for event listeners onOpen and onClose

This awesome jQuery plugin is developed by kuoppa. For more Advanced Usages, please check the demo page or visit the official website.