Image Modal With Zoom In/Out - jQuery image-popup.js
File Size: | 4.01 KB |
---|---|
Views Total: | 6885 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

image-popup.js is a lightweight and fast jQuery image lightbox plugin that displays images in a modal popup with zoom in and zoom out capabilities.
How to use it:
1. Add the CSS class zz_image
to the images to be displayed in the lightbox popup on click.
<img src="1.jpg" alt="Image 1" class="zz_image" /> <img src="2.jpg" alt="Image 2" class="zz_image" /> <img src="3.jpg" alt="Image 3" class="zz_image" /> <img src="4.jpg" alt="Image 4" class="zz_image" /> <img src="5.jpg" alt="Image 5" class="zz_image" /> ...
2. Load the image-popup.js script after the latest jQuery library.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/image-popup.js"></script>
3. The necessary CSS styles for the image lightbox.
#zz_frame::before { content: ''; top: 0; left: 0; width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.85); z-index: -1; } #zz_frame { top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 999; } #zz_media { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin: 0 auto; max-width: 500px; display: inline-block; } #zz_media img { width: 100%; box-shadow: 0px 0px 20px 1px rgb(0,0,0); } #zz_frame .zz_close { color: #fff; position: absolute; right: 10px; top: 10px; font-size: 26px; background: transparent; border: 0; border-radius: 50%; cursor: pointer; } #zz_frame .zz_controls { color: #fff; position: absolute; left: 10px; top: 10px; } #zz_frame .zz_controls button { background: #000; border: 0; color: #fff; padding: 8px; margin-right: 5px; }
This awesome jQuery plugin is developed by manharsharma007. For more Advanced Usages, please check the demo page or visit the official website.