Minimal jQuery Responsive Image Lightbox Plugin - PhotoBox
File Size: | 258 KB |
---|---|
Views Total: | 2497 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

PhotoBox is an ultra-light (~1kb) jQuery plugin that displays the large version of an image in a responsive & fullsreen lightbox with a close button.
How to use it:
1. Include the jQuery javascript library and jQuery PhotoBox plugin at the bottom of the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.photobox.js" type="text/javascript"></script>
2. Insert an image into your web page. Optionally you're allowed to use data-photobox-image
to define the large version of the image.
<img class="photobox" data-photobox-image="large.png" src="small.png" alt="">
3. The required CSS to style the image lightbox.
img.photobox { display: inline-block; vertical-align: top; cursor: pointer; } #photobox-container { display: table-cell; vertical-align: middle; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.9); font: 0/0 a; text-align: center; } #photobox-container:before { content: ' '; display: inline-block; vertical-align: middle; height: 100%; } #photobox-container > img { display: inline-block; vertical-align: middle; max-width: 80%; max-height: 80%; } #photobox-close { position: absolute; top: 50px; right: 45px; width: 16px; height: 16px; background: url("../img/close.png"); cursor: pointer; }
4. Call the plugin on the image.
<script type="text/javascript"> $("img.photobox").photobox(); </script>
This awesome jQuery plugin is developed by Mike-Hell. For more Advanced Usages, please check the demo page or visit the official website.