Skip to content
Yet Another LightBox (Vanilla)
Branch: master
Clone or download
Latest commit 2f2b9b5 Jun 24, 2015
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Release v0.1.2 Jun 24, 2015
src Fixed bug with z-index Jun 24, 2015
.gitignore First Version (Vanilla) Feb 14, 2015
.jshintrc First Version (Vanilla) Feb 14, 2015 First Version (Vanilla) Feb 14, 2015
bower.json Release v0.1.2 Jun 24, 2015

Yalb (Vanilla)

Yet Another LightBox
Yalb only uses pure Javascript. All animations are done using css-transition or animation. If you would like to go with a jQuery-version take a look at jquery.yalb.

  • Note that Yalb (Vanilla) is using Javascript-Functions which are only available in modern browsers.
  • The Script detects transition-support and does a fallback to no animation at all (e.g. IE9)
  • IE supports no CustomEvents. Thats why a polyfill is added to the script

Getting Started

Download the production version or the development version. Or run

bower install vanilla.yalb
// yalb was already taken

Include yalb in your web page:

<link rel="stylesheet" href="dist/yalb.min.css">
<script src="dist/yalb.min.js"></script>
jQuery(function($) {

  var images = [


  // for other possibilities to call yalb see below



Collections you can pass to Yalb / Examples

  • array filled with Strings

      var images = [
  • NodeList or Array of Nodes

      var images = document.getElementsByTagName('img');
      // or
      var links = document.getElementsByTagName('a');
      yalb(links, {src: 'href'});
      // or any other node with an attribute containing the path
      // e.g. <span data-image="/path/to/image.jpg"
      yalb(span, {src: 'data-image'});
  • jQuery-Collection

      var images = $('img');
      // or same as above
  • selfmade object containing the path

      var images = [
      		foo: 'bar'
      		path: 'path/to/image.jpg'
      		// and so on
      yalb(images, {src: 'path'});
      // or even
      var images = [
      		path: {
      			'to': {
      				'image': 'path/to/image.jpg'
      		// and so on
      yalb(images, {src: ''});


The following options can be passed when calling yalb:

  • src ( default:'src' ), Attribute where the path is located.
  • current ( default:0 ), The image which is presented when opening yalb
  • class ( default:'yalb' ), The class passed to the html-container of yalb
  • loop ( default:true ), If true, images will be repeated when hitting the first/last image
  • open ( default:true ), If true, yalb opens when called
  • width ( default:0 ), max-with of the Yalb-window
  • height ( default:0 ), max-height of the Yalb-window

You can change the default values for the whole page by assigning to yalb.defaults

yalb.defaults = {
    src: 'src',
    current: 0,
    'class': 'yalb',
    loop: true,
    open: true,
    width: 0,
    height: 0


You can control the behavior of yalb with the following methods

  • - Opens yalb when still not open
  • yalb.close() - Close yalb; same as hitting the close-button
  • - Next Image; same as hitting the next-button
  • yalb.prev() - Previous Image; same as hitting the prev-button
  • - Changes to the image on position index
  • yalb.get() - Gets the node of the container on which all events are triggered


You can listen to the following Events:

  • change - When the image has changed
  • open - When open is called (per Method or per yalb-call with open:true)
  • close - When close-button is pressed
  • next - When next-button is pressed
  • prev - When prev-button is pressed
  • show - When show is called


var yalb_instance = yalb.get(); // or yalb_instance = yalb(); or next().next()
yalb_instance.addEventListener('next', function(){ /* do stuff */ }, false);
You can’t perform that action at this time.