Minimal jQuery Responsive Image Lightbox Plugin - PhotoBox

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.