jQuery Plugin For Image Gallery Lightbox - Yalb

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.