Super Lightweight jQuery Responsive Image Lightbox Plugin - Lbox
File Size: | 482 KB |
---|---|
Views Total: | 958 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A minimalist jQuery plugin to create a responsive image lightbox with support for image lazy loading.
How to use it:
1. Include the necessary jQuery Javascript library in your document's head section.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
2. Insert an image into your document. Use the data-full-url
attribute to specify the large version of this image that will be displayed in the lightbox.
<img src="thumb.jpg" class="lboxImg" data-full-url="full.jpg">
3. Create the container for the image lightbox.
<div id="lbox" style="display: none;"> <div id="lboxinner"> </div> </div>
4. The CSS to style the image lightbox.
.lboxImg { cursor: pointer; } #lbox { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; background-color: rgba(0, 0, 0, 0.6); } #lboxinner { color: #fff; font-weight: bold; position: relative; top: 7.5%; width: 85%; height: 85%; overflow: auto; margin: 0 auto; text-align: center; }
4. The Javascript to active the plugin.
function showLbox(url) { $("#lboxinner").html('Loading image...'); $("#lbox").show(300); $('<img src="'+ url +'">').load(function() { $("#lboxinner").html(''); $(this).appendTo('#lboxinner'); }); } function hideLbox() { $("#lboxinner").html(''); $("#lbox").hide(300); } $(function() { $(".lboxImg").click(function () { showLbox($(this).data('full-url')); }); $("#lbox").click(function () { hideLbox(); }); $(document).keyup(function (e) { if (e.keyCode == 27) hideLbox(); }); });
This awesome jQuery plugin is developed by TristanPerry. For more Advanced Usages, please check the demo page or visit the official website.