jQuery Plugin For Image Gallery Lightbox - Yalb
File Size: | 18 KB |
---|---|
Views Total: | 2347 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yalb (yet another lightbox) jQuery plugin that showcases grouped images in a lightbox popup gallery with support for infinite loop and next/prev navigation.
Basic usage:
1. Include jQuery library and the jQuery Yalb plugin's files in the document.
<link rel="stylesheet" href="dist/yalb.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="dist/jquery.yalb.min.js"></script>
2. Prepare an array of images you wish to showcase in the gallery lightbox.
var images = [ 'img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg' ]
3. Call the plugin and done.
$.yalb(images);
4. You can also generate a gallery lightbox form existing images on your web page.
$('img').yalb(//OPTIONS);
5. Or from local images in a specified folder.
var images = [ { foo: 'bar' path: 'path/to/image.jpg' }, { // and so on } ]; $.yalb(images, {src: 'path'});
6. Available options.
$('img').yalb({ // where the path is located src: 'src', // The image which is presented when opening yalb current: 0, // The class passed to the html-container of yalb 'class': 'yalb', // Images will be repeated when hitting the first/last image loop: true, // Yalb opens when called open: true, // Max-with of the Yalb-window width: 0, // Max-height of the Yalb-window height: 0 });
7. Public methods.
// Opens yalb when still not open $.yalb.open() // Close yalb; same as hitting the close-button $.yalb.close0() // Next Image; same as hitting the next-button $.yalb.next() // Previous Image; same as hitting the prev-button $.yalb.prev() // Changes to the image on position index $.yalb.show(index) // Binds handler to an event (take a look at the Events-section) $.yalb.on() // Removes Handler $.yalb.off() // Gets the jQuery-instance of the container on which all events are triggered $.yalb.get()
Change log:
v0.3.3 (2015-06-25)
- Fixed bug, added z-index
This awesome jQuery plugin is developed by Fuzzyma. For more Advanced Usages, please check the demo page or visit the official website.