Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- ---
- 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
- });
- }
- }
- });
Add Comment
Please, Sign In to add comment