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
$("a.minlight-links").minlight({
container: "#main",
onOpen: function( e, minlight ) {
}
});
$("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 = {
fadeTime: 200,
easing: "swing",
container: "body",
transition: false,
lightboxClass: "lightbox",
maskClass: "lightbox-mask",
openClass: "lightbox-open",
closedClass: "lightbox-closed",
closeSelect: "",
closeOnMaskClick: true,
expandMask: true,
disableMask: false,
target: "",
href: "",
imgWidth: "auto",
imgHeight: "auto",
skeleton: "<div><a href='#' class='lightbox-close' data-bypass>X</a></div>"
};
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
$elem.minlight("option", "onOpen", function() {
});
$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
e
(jQuery.Event): jQuery event objectmin
(Lightbox): The minlight instance
Fired when the lightbox has opened (after animation completion)
"minlightclose"
Arguments Received
e
(jQuery.Event): jQuery event objectmin
(Lightbox): The minlight instance
Fired when the lightbox is closed (after animation completion)
"minlightwillopen"
Arguments Received
e
(jQuery.Event): jQuery event objectmin
(Lightbox): The minlight instance
Fired when the lightbox is about to open (before animation completion)
"minlightwillclose"
Arguments Received
e
(jQuery.Event): jQuery event objectmin
(Lightbox): The minlight instance
Fired when the lightbox is about to close (before animation completion)