Smooth jQuery Image Zoom & Lightbox Plugin - zooomin

zooomin is a jQuery plugin used to zoom in images and display them in a fullscreen, mobile-friendly lightbox, inspired by medium.com. 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="//code.jquery.com/jquery.min.js"></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.

$('.zooomin').zooomin();

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:

$('.zooomin').zooomin({
  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.

$('.zooomin').zooomin({
  onClose:        false,
  onOpen:         false,
  onInit:         false
});

7. More configuration options.

$('.zooomin').zooomin({
  video:          false,
  videoWidth:     1920,
  videoHeight:    1080,
  videoAutoplay:  false,
});

Changelog:

2018-06-20

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

2017-10-10

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