Responsive jQuery/Html5 Based Gallery Lightbox - mlightbox
File Size: | 1.17 MB |
---|---|
Views Total: | 9161 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
mlightbox is a jQuery image lightbox plugin which displays a gallery of images grouped with Html5 data-gallery
attribute in a responsive lightbox.
How to use it:
1. Import jQuery library and the jQuery mlightbox plugin's files into your document.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="mlightbox.js"></script>
2. Create the Html to display all the images wrapped with the same Html5 data-gallery
attribute in a lightbox as you click on any of them.
<img src='1.jpg' data-image='1.jpg' data-gallery='gallery1' data-desc='Image caption 1' > <img src='2.jpg' data-image='2.jpg' data-gallery='gallery1' data-desc='Image caption 2' > <img src='3.jpg' data-image='3.jpg' data-gallery='gallery1' data-desc='Image caption 3' >
3. Style the gallery lightbox in the CSS.
#lgbx, #lgbx_bcg { position: fixed } #lgbx_bcg { top: 0; left: 0; z-index: 50; width: 100%; height: 100%; cursor: pointer; background: rgba(0,0,0,0.8) } #lgbx { background: #FFF; padding: 5px; z-index: 55; top: 0; left: 0 } #lgbx_close, #lgbx_desc, #lgbx_next, #lgbx_prev { position: absolute; z-index: 56; display: none } #lgbx_close { z-index: 56; right: 9px; top: 9px; cursor: pointer; width: 15px } #lgbx_desc { bottom: 0; right: 0; background: rgba(0,0,0,0.6); color: #FFF; padding: 5px 8px 1px; font-size: 12px } #lgbx_next, #lgbx_prev { cursor: pointer; top: 50%; margin-top: -20px; height: 40px } #lgbx_next { right: 5px } #lgbx_prev { left: 5px }
4. That's it. You can override the default global variables at the beginning of the mlightbox.js
.
// navigation arrows darrows:true, // close icon dclose:true, // image captions ddesc:true,
This awesome jQuery plugin is developed by miskith. For more Advanced Usages, please check the demo page or visit the official website.