Simple Image Gallery Lightbox Plugin With jQuery - jzBox
File Size: | 3.49 KB |
---|---|
Views Total: | 5142 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jzBox is a simple, unobtrusive jQuery image viewer plugin that displays a group of images as a lightbox popup gallery. Navigating to the previous/next image can be achieved by clicking buttons below the gallery lightbox or clicking the left/right arrow keys.
How to use it:
1. Load the Font Awesome 4 for navigation arrow icons (Optional).
<link rel="stylesheet" href="font-awesome.min.css">
2. Add a group of thumbnails into your webpage.
<a href="large-1.jpg" class="jzBoxLink" title="Image 1"> <img src="thumb-1.jpg"> </a> <a href="large-2.jpg" class="jzBoxLink" title="Image 2"> <img src="thumb-2.jpg"> </a> <a href="large-3.jpg" class="jzBoxLink" title="Image 3"> <img src="thumb-3.jpg"> </a>
3. Build the markup structure for the gallery lightbox.
<div id="jzBox" class="jzBox"> <div id="jzBoxNextBig"></div> <div id="jzBoxPrevBig"></div> <img src="#" id="jzBoxTargetImg"> <div id="jzBoxBottom"> <div id="jzBoxTitle"></div> <span id="jzBoxMoreItems"> <div id="jzBoxCounter"></div> <i class="fa fa-arrow-circle-left fa-2x" id="jzBoxPrev"></i> <i class="fa fa-arrow-circle-right fa-2x" id="jzBoxNext"></i> </span> <i class="fa fa-close fa-2x" id="jzBoxClose"></i> </div> </div>
4. The default CSS styles for the gallery lightbox.
#jzBox { top: 0; z-index: 10000; position: fixed; background-color: rgba(30, 30, 30, 0.9); margin: 0 !important; text-align: center; width: 100%; height: 100%; display: none; color: #fff; } #jzBoxTargetImg { margin: 2% 0 1% 0; max-width: 96%; max-height: 73%; cursor: pointer; } #jzBoxCounter { margin-bottom: 1%; font-size: 12px; } #jzBox i:hover { cursor: pointer; color: #2aabd2; } #jzBoxBottom { max-height: 22%; } #jzBoxNextBig, #jzBoxPrevBig { cursor: pointer; top: 0; left: 0; width: 35%; position: fixed; z-index: 10001; height: 100%; } #jzBoxNextBig { left: 65%; }
5. Place jQuery library and the jQuery jzBox plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jzBox.js"></script>
Change log:
2016-01-15
- added image load callback
This awesome jQuery plugin is developed by jzaplet. For more Advanced Usages, please check the demo page or visit the official website.