Smooth jQuery Image Zoom & Lightbox Plugin - zooomin
File Size: | 7.78 KB |
---|---|
Views Total: | 6473 |
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 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.