Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A mini lightbox (jQuery)
/* A small script to display lightboxes. No IE6 support. */
/*global jQuery: false*/
(function($, window){
"use strict";
$.miniLightbox = {};
var EVENT_NS = 'minilightbox';
var DEFAULT_SETTINGS = {
'class': '',
'opacity': 0.1,
'onBeforeClose': null,
'onAfterClose': null,
'onBeforeShow': null,
'onAfterShow': null,
'closeOnEscape': true
};
var $overlay = null;
var $lightbox = null;
var $window = $(window);
var $document = $(window.document);
var $body = $(window.document.body);
var isOverlayVisible = false;
var customEvents = {};
var currentSettings = {};
function startEvents() {
$window.bind('resize.' + EVENT_NS, function(){
var winWidth = $window.width();
var winHeight = $window.height();
$overlay.css({
width: winWidth,
height: winHeight
});
if ($lightbox !== null) {
var lightboxLeft = winWidth/2 - $lightbox.outerWidth()/2;
var lightboxTop = winHeight/2 - $lightbox.outerHeight()/2;
$lightbox.css({
left: ((lightboxLeft > 0)? lightboxLeft : 0) + 'px',
top: ((lightboxTop > 0)? lightboxTop : 0) + 'px'
});
}
}).resize();
$overlay.bind('click.' + EVENT_NS, function(e) {
$.miniLightbox.close(customEvents.onAfterClose);
});
if (currentSettings.closeOnEscape) {
$document.bind('keyup.' + EVENT_NS, function(e) {
if (e.keyCode === 27) {
$.miniLightbox.close(customEvents.onAfterClose);
}
});
}
}
function endEvents() {
$window.unbind('resize.' + EVENT_NS);
$overlay.unbind('click.' + EVENT_NS);
$document.unbind('keyup.' + EVENT_NS);
customEvents = {};
}
function showOverlay(callback) {
isOverlayVisible = true;
if ($overlay === null) {
$overlay = $('<div id="lightbox-overlay" style="display:none;position:fixed;z-index:10000;top:0;left:0;" />').appendTo($body);
}
startEvents();
$overlay.stop().css('opacity', 0).show().animate({opacity: currentSettings.opacity}, 150, callback);
}
function assignCustomEvents() {
var customEventsNames = ['onBeforeClose', 'onAfterClose', 'onBeforeShow', 'onAfterShow'];
for (var i = 0; i < customEventsNames.length; i++) {
if (currentSettings[customEventsNames[i]] !== null) {
customEvents[customEventsNames[i]] = currentSettings[customEventsNames[i]];
}
}
}
function openLightbox(lightboxContent) {
assignCustomEvents();
if ($lightbox === null) {
$lightbox = $('<div tabindex="0" id="lightbox" class="'+ currentSettings['class'] +'" style="display:none;position:fixed;z-index:10001;"></div>').appendTo($body);
} else {
$lightbox.attr('class', currentSettings['class']);
}
$lightbox.empty().append(lightboxContent);
// Custom event: before show
if (customEvents.onBeforeShow) {
customEvents.onBeforeShow($lightbox);
}
$lightbox.stop().fadeIn(150, function() {
// Custom event: after show
if (customEvents.onAfterShow) {
customEvents.onAfterShow($lightbox);
}
});
$window.resize();
}
$.miniLightbox.open = function(lightboxContent, settings) {
currentSettings = $.extend({}, DEFAULT_SETTINGS, settings);
if (!isOverlayVisible) {
showOverlay(function(){
openLightbox(lightboxContent);
});
} else {
openLightbox(lightboxContent);
}
};
$.miniLightbox.wait = function() {
// TODO: display the overlay and a loader
};
$.miniLightbox.refresh = function() {
$window.trigger('resize.' + EVENT_NS);
};
$.miniLightbox.close = function(callback) {
if ((customEvents.onBeforeClose && customEvents.onBeforeClose() !== false) || !customEvents.onBeforeClose) {
isOverlayVisible = false;
$overlay.stop().fadeOut(150);
if ($lightbox !== null) {
$lightbox.stop().fadeOut(150, function(){
$lightbox.css('opacity', 1);
});
}
if (callback) {
callback($lightbox);
}
endEvents();
}
};
})(jQuery, this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment