LightboxMe.js

/*
---

script: LightboxMe.js

description: Transforms an element into a light box. Based on Buck Wilson's plugin.

author: Rainer Borene

license: MIT-license

provides: [LightboxMe]

...
*/

var LightboxMe = new Class({

	Implements: [Options, Events],

	options: {
		// animation
		transition: 'sine:in:out',
		overlaySpeed: 'short',
		lightboxSpeed: 'short',

		// close
		closeSelector: '.close',
		closeClick: true,
		closeEsc: true,

		// callbacks
		onLoad: $empty,
		onClose: $empty,

		// style
		classPrefix: 'lb',
		zIndex: 999,
		centered: true,
		overlayStyles: {
			background: 'black', 
			opacity: 0.6
		}
	},

	initialize: function(element, options){
		this.setOptions(options);

		this.element = (typeof element === 'string' ? document.id(element) : element);

		this.initializeElements();
		this.initializeEvents();
	},

	initializeElements: function(){
		this.closeButton = $$(this.options.closeSelector);
		this.element.setStyles({
			position: 'absolute',
			display: 'none',
			opacity: 0,
			'z-index': this.options.zIndex + 3
		});

		this.overlay = new Element('div').injectAfter(this.element);
		this.overlay.setStyles(this.options.overlayStyles);
		this.overlay.setStyles({
			display: 'none',
			position: 'absolute',
			width: '100%',
			top: 0,
			left: 0,
			right: 0,
			bottom: 0,
			opacity: 0,
			'class': this.options.classPrefix + '_overlay',
			'z-index': this.options.zIndex + 2
		});
	},

	initializeEvents: function(){
		if (this.closeButton){
			this.closeButton.addEvent('click', this.close.bind(this));
		}

		if (this.options.closeClick){
			this.overlay.addEvent('click', this.close.bind(this));
		}

		if (this.options.closeEsc){
			window.addEvent('keypress', function(event){
				if (event.key == 'esc'){
					this.close();
				}
			}.bind(this));
		}

		this.overlay.set('tween', {
			transition: this.options.transition, 
			duration: this.options.overlaySpeed,
			onComplete: function(){
				this.element.setStyle('display', 'block');
				window.fireEvent('resize');
				this.element.tween('opacity', 1);
			}.bind(this)
		});

		this.element.set('tween', {
			transition: this.options.transition, 
			duration: this.options.lightboxSpeed,
			onComplete: function(){
				this.fireEvent('onLoad');
			}.bind(this)
		});

		window.addEvent('resize', this.redraw.bind(this));
	},

	open: function(){
		this.overlay.setStyle('display', 'block');
		this.overlay.tween('opacity', this.options.overlayStyles.opacity);
		document.documentElement.setStyle('overflow', 'hidden');
	},

	close: function(){
		var hide = {
			display: 'none', 
			opacity:0
		};

		this.overlay.setStyles(hide);
		this.element.setStyles(hide);
		this.fireEvent('onClose');

		document.documentElement.setStyle('overflow', 'auto');
	},

	toElement: function(){
		return this.element;
	},

	destroy: function(){
		this.element.destroy();
		this.overlay.destroy();
	},

	redraw: function(){
		var size = window.getSize();

		this.overlay.setStyles({width: size.x, height: size.y});

		if (this.options.centered){
			this.element.setStyles({
				top: (size.y - this.element.getSize().y) / 2,
				left: (size.x - this.element.getSize().x) / 2
			});
		}
	}

});