/** * jquery.loadAnimation 0.2 * * Copyright (c) 2009 Jan Faessler * * Licensed under MIT * http://www.opensource.org/licenses/mit-license.php * * Launch : April 2009 * Version : 0.2 */ (function($) { function callFunction(options, name, self) { var fn = options[name]; if ($.isFunction(fn)) { try { return fn.call(self); } catch (error) { if (options.eAlert) alert("Error calling loadAnimation." + name + ": " + error); else throw error; return false; } } return true; } // mask instance (singleton) var mask = null; // animated elements var animated, conf = null; var origIndex = 0; // global methods $.loadAnimation = { getVersion: function() { return [0, 2, 0]; }, getMask: function() { return mask; }, getAnimated: function() { return animated; }, getConf: function() { return conf; }, isStarted: function() { return mask && mask.is(":visible"); }, start: function(target, options) { // already started ? if (this.isStarted()) return this; if (target) { animated = target; origIndex = animated.eq(0).css("zIndex"); conf = options; } else { target = animated; options = conf; } if (!target || !target.length) return this; // setup mask if not already done if (!mask) { mask = $('
'); if (options.image.src != '') img = $('') .attr('src',options.image.src) .attr('alt',options.image.alt); } // set mask css properties mask.css({ position: 'absolute', top: target.offset().top, left: target.offset().left, width: target.width(), height: target.height(), display: 'none', opacity: 0, zIndex: options.zIndex, backgroundColor: options.color }); // set image css properities img.css({ zIndex: options.zIndex+1, position: 'absolute', top: (target.height()/2-options.image.size.height/2), left: (target.width()/2-options.image.size.width/2) }); // insert image into mask and append mask to body mask.html(img); $("body").append(mask); // onBeforeLoad if (callFunction(options, "onBeforeLoad", this) === false) return this; // reveal mask if (!this.isStarted()) { mask.css({opacity: 0, display: 'block'}).fadeTo(options.loadSpeed, options.opacity, function() { callFunction(options, "onLoad", $.loadAnimation); }); } return this; }, end: function() { var self = this; if (!this.isStarted()) { return self; } if (callFunction(conf, "onBeforeClose", self) === false) return self; mask.fadeOut(conf.closeSpeed, function() { animated.css({zIndex: false ? origIndex : null}); callFunction(conf, "onClose", self); }); } }; // jQuery plugin initialization $.prototype.loadAnimation = function(conf) { // no elements to expose if (!this.length) return this; var options = { eAlert: true, // mask settings maskId: 'exposeMask', loadSpeed: 'slow', closeSpeed: 'fast', // css settings zIndex: 998, opacity: 0.9, color: '#ccc', // image settings image: { src: '', alt: 'loading...', size: { width: 100, height: 10 } } }; // save critical options if (typeof conf == 'string') conf = {color: conf}; if (typeof conf.image == 'string') conf.image = { src: conf.image, alt: options.image.alt, size: options.image.size }; if (conf.image.alt == undefined) conf.image.alt = options.image.alt; if (conf.image.size == undefined) conf.image.size = options.image.size; if (conf.image.size.width == undefined) conf.image.size.width = options.image.size.width; if (conf.image.size.height == undefined) conf.image.size.height = options.image.size.height; // extend and overwrite standard options with user config $.extend(options, conf); // start animation $.loadAnimation.start(this, options); // return jQuery object return this; }; })(jQuery);