Adaptive Gallery lightbox Plugin For jQuery - easyJqueryGallery
| File Size: | 34.3 KB |
|---|---|
| Views Total: | 2025 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A lightweight jQuery gallery lightbox plugin to display the full-sized images in a responsive gallery popup that auto shrinks and expands depending the current image size.
How to use it:
1. Add the thumbnails and original images to the gallery.
<div class="myGallery"> <ul> <li> <a href="https://placeimg.com/1000/600/animals"> <img src="https://placeimg.com/200/200/animals" alt="Image Caption 1"> </a> </li> <li> <a href="https://placeimg.com/728/598/arch"> <img src="https://placeimg.com/200/200/arch" alt="Image Caption 2"> </a> </li> <li> <a href="https://placeimg.com/675/906/nature"> <img src="https://placeimg.com/200/200/nature" alt="Image Caption 3"> </a> </li> <li> <a href="https://placeimg.com/640/480/people"> <img src="https://placeimg.com/200/200/people" alt="Image Caption 4"> </a> </li> ... </ul> </div>
2. Load easyJqueryGallery plugin's files in the document which has jQuery libray loaded.
<link rel="stylesheet" href="css/easyjquerygallery.min.css"> <script src="jquery.min.js"></script> <script src="js/easyjquerygallery.min.js"></script>
3. Initialize the gallery lightbox by calling the function on the top container.
$('.myGallery').easyGalleryJquery();
4. Set the maximum width/height of the gallery lightbox.
$('.myGallery').easyGalleryJquery({
percent: 80
});
5. Change the default title of the gallery.
$('.myGallery').easyGalleryJquery({
title:'My Gallery'
});
6. Specify the image path of the loading spinner.
$('.myGallery').easyGalleryJquery({
preloader:'images/loader.gif'
});
This awesome jQuery plugin is developed by lucasato. For more Advanced Usages, please check the demo page or visit the official website.











