Fork me on GitHub

YALB (Yet Another Lightbox) Build Status

A lightweight, dead simple, and extremely flexible lightbox generator.


Check out the demo provided with this package.


  1. Download the latest sources to your computer using a web browser.
  2. Extract the contents of the .zip into a folder on your local computer.
  3. Upload the folder with the following files to your web site.
Filename Role
yalb.min.js The main script to be included from within your HTML document.


Getting started couldn't be easier. Create the HTML block you want to use for the lightbox anywhere within the document <body> and use the jQuery selector as describe below. It is important that the root element has height and width attributes defined either inline or from within your style sheet.


Source Code

Add the following Javascript between the <head></head> tags of your HTML document.

Use Example 1 - Basic lightbox usage

<script src="">

<script src="/path/to/yalb.min.js"></script>
$(document).ready(function() {
  var content = $('#content').YALB();

  $('#trigger').click(function() {


<div id="content">
  Hello World

Use Example 2 - Generate HTML form using the Webform-Toolkit and view as a lightbox

<script src="">

<script src="/path/to/webform.toolkit.min.js"></script>
<script src="/path/to/yalb.min.js"></script>
$(document).ready(function() {

  // generate interactive webform
    id   : 'login',
    action : '',
    fields : [
        "label"       : "User Name",
        "type"        : "text",
        "name"        : "username",
        "value"       : "",
        "maxlength"   : "15",
        "filter"      : "^\\w{0,15}$",
        "description" : "",
        "error"       : "Supported characters: A-Z, 0-9 and underscore",
        "required"    : "1"
        "label"       : "Password",
        "type"        : "password",
        "name"        : "password",
        "value"       : "",
        "maxlength"   : "15",
        "filter"      : "^(?!password)(.{0,15})$",
        "description" : "",
        "error"       : "The password entered is not valid",
        "required"    : "1"

  // define lightbox properties
  var win = $('#login').YALB({ showSpeed : 200 });

  // view login window


<div id="content"></div>

Plug-in Settings

The following options can be passed to the plug-in main function as JSON

Option Description Default Value
maskColor color of the window mask using hexadecimal notation #000000
hideEasing animation to be used when hiding the lightbox linear
showEasing animation to be used when viewing the lightbox linear
hideSpeed speed of the hide animation in milliseconds 250
showSpeed speed of the view animation in milliseconds 500

Click here for more information about the available jQuery UI Easing effects.

jQuery Support

In order to support older web browsers, specifically Internet Explorer 7, this package requires jQuery 1.8.3. Furthermore, jQuery has recently dropped support for IE8 in version 2, so if there is no compelling reason to support these two web browsers, it is recommended that you upgrade to the latest version of jQuery. If you still need to support IE8 please upgrade to jQuery 1.9+.

Functional Testing

This package has been preconfigured to support QUnit headless testing using Travis-CI. If you plan on using another integration tool you will have to create a custom project that combines the use of QUnit and PhantomJS plugins. If headless testing in not available you can manually run test.html in your web browser.


I have included with this package a packed version (2.6 kB) and developers version (unpacked 6.9 kB)

You can always find the latest updates within this projects repository.

Code Repository

This projects repository is currently hosted on Github


For feedback, bug reports, or other comments, feel free to contact me at: devel at mbrooks dot info

License and Warranty

This package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.

YALB is provided under the terms of the MIT license.

YALB ©2011-2015 Marc S. Brooks