Nutty Professor Movie


    0.3.3 • Public • Published


    Yet Another LightBox
    Easy to use, out of the box

    If you are looking for a plain-javascript-version take a look at yalb!

    Getting Started

    Download the production version or the development version. Or run

    bower install jquery.yalb

    Include yalb after jquery in your web page:

    <link rel="stylesheet" href="dist/yalb.min.css">
    <script src="jquery.js"></script>
    <script src="dist/jquery.yalb.min.js"></script>
    jQuery(function($) {
      var images = [
      // or just
      // 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 of course
        // 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.close0() - 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.on() - Binds handler to an event (take a look at the Events-section)
    • $ - Removes Handler (Caution!! - This will also remove handlers used by yalb itself when you don't explicitely specify a listener which should be removed or when you don't use namespaced events)
    • $.yalb.get() - Gets the jQuery-instance of the container on which all events are triggered


    You can listen to the following Events when using yalb:

    • 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


    You can style yalb to your own needs. An example-style is shipped with the code. You can change it to your needs. Every button used is styled with css-only. No icon is needed. Even the loading-animation is css.

    Take a look into the css-file - it's selfexplaining!


    npm i jquery.yalb

    DownloadsWeekly Downloads






    Last publish


    • fuzzyma