jQuery minlight

minlight creates lightboxes. By default, it uses a simple fading javascript animation. However, set the transition option to true and use your own custom css transitions that you can trigger through the use of classes.

Demos incoming soon.

Specify openClass and closedClass in options, or use the defaults.

Check out Effeckt.css for suggested performant CSS animations and transitions to use with your lightboxes.

Due to minlight's tiny footprint, and the fact that it is made to work with CSS (taking advantage of hardward acceleration automatically), it is perfectly suited for mobile.

minlight.min.js (5.0kb/2.1kb gzip!), included in this repo, is compressed with uglifyjs.

Loading minlight

minlight can obviously be included with your scripts at the end of the body, but minlight supports AMD for javascript module love.

With script tags:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/minlight.js"></script>

With AMD loader in an anonymous module:

define([ "jquery", "jquery-plugins/minlight" ], function( $ ) {
    $(function() {
        $(".minlight-links").minLight();
    });
});

Initialization

// Will bind to click
$("a.minlight-links").minlight({
    container: "#main",
    onOpen: function( e, minlight ) {
        // context is the minlight element
        // minlight is the minlight instance
        // $target (the lightbox) is available at minlight.$target
    }
});
 
// Will bind to focus
$("input.minlight-input").minlight({
    href: "awesome.jpg"
});

Options

All options can be overridden by passing an object literal like any other plugin,
with the "option" method,
OR with data-* attributes on the element,
which can be very useful when calling minlight on more than one element at a time.

e.g.

<a href="something.jpg" title="alt text" data-fade-time="300" data-img-width="750"
    data-container="#main" data-target="#awesome-lightbox">Open Lightbox</a>

Order of precendence: data-* attributes > options passed on creation > defaults

Lightbox.defaults = {
    // Animation time in ms
    fadeTime: 200,
    easing: "swing",
    container: "body",
    // Set this to true if you'd like to do your own css transition using your own styles
    transition: false,
    // Classes for the lightbox
    lightboxClass: "lightbox",
    maskClass: "lightbox-mask",
    // Classes for doing your own transitions
    openClass: "lightbox-open",
    closedClass: "lightbox-closed",
    // Selector for finding all user-defined close buttons in the target
    // for quick binding to close
    closeSelect: "",
    // Close the lightbox when the mask is clicked
    closeOnMaskClick: true,
    // Expand the mask to handle document height being larger than window height
    // This is sometimes not ideal if the container is something other than the body
    expandMask: true,
    // Disable the mask
    disableMask: false,
    // The actual lightbox the element should correspond to
    // If one already exists hidden on the page,
    // add its ID selector here
    target: "",
    // Image href (usually assigned from the anchor's href)
    href: "",
    imgWidth: "auto",
    imgHeight: "auto",
    // The basic skeleton for a lightbox
    // Don"t use a data-* attribute to set this (that's just ugly)
    skeleton: "<div><a href='#' class='lightbox-close' data-bypass>X</a></div>"
    // onOpen, onClose, willOpen, willClose cannot be extended with data-*, so they are included in defaults
    // they can be passed on creation or changed with the `option` method
    // they can also be bound on the element as "minlightopen", "minlightclose", "minlightwillopen", "minlightwillclose"
};

Methods

Methods can be called in the same way as a widget from the UI widget factory. Pass a method name to minlight. Strings are interpreted as method names.

open

$elem.minlight("open");

Open the lightbox

close

$elem.minlight("close");

Close the lightbox

destroy

$elem.minlight("destroy");

Unbinds all events and removes all data, including the minlight instance on the element.

instance

var minInstance = $elem.minlight("instance");

Retreives the minlight instance(s) from the set. If there are multiple, you will get an array of instances. If there is only one, you will just get the instance of minlight.

option

// One at a time
$elem.minlight("option", "onOpen", function() {
    // Replace the onOpen callback
});
 
// Several options at once
$elem.minlight("option", {
    fadeTime: "fast",
    container: "#main",
    maskClass: "super-mask"
});

Any option can be changed. See the defaults above for a list.

Events

"minlightopen"

Arguments Received

1. e (jQuery.Event): jQuery event object
2. min (Lightbox): The minlight instance

Fired when the lightbox has opened (after animation completion)

"minlightclose"

Arguments Received

1. e (jQuery.Event): jQuery event object
2. min (Lightbox): The minlight instance

Fired when the lightbox is closed (after animation completion)

"minlightwillopen"

Arguments Received

1. e (jQuery.Event): jQuery event object
2. min (Lightbox): The minlight instance

Fired when the lightbox is about to open (before animation completion)

"minlightwillclose"

Arguments Received

1. e (jQuery.Event): jQuery event object
2. min (Lightbox): The minlight instance

Fired when the lightbox is about to close (before animation completion)