Adaptive Gallery lightbox Plugin For jQuery - easyJqueryGallery
File Size: | 34.3 KB |
---|---|
Views Total: | 2015 |
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.