v1.1

jquery.vegas.js

@@ -1,7 +1,7 @@
 // ----------------------------------------------------------------------------
 // Vegas - jQuery plugin 
 // Add awesome fullscreen backgrounds to your webpages.
-// v 1.0 beta
+// v 1.1 beta
 // Dual licensed under the MIT and GPL licenses.
 // http://vegas.jaysalvat.com/
 // ----------------------------------------------------------------------------
@@ -27,242 +27,393 @@
 // THE SOFTWARE.
 // ----------------------------------------------------------------------------
 ( function( $ ){
-	var $background = $( '<img />' ).addClass( 'vegas-background' ),
-		$overlay 	= $( '<div />' ).addClass( 'vegas-overlay' ),
-		$loading 	= $( '<div />' ).addClass( 'vegas-loading' ),
-		$current,
-		timer,
-		step = 0,
-		methods = {
-
-		// Init plugin
-		init : function( settings ) {
-			var options = {
-				src:		getBackground(),
-				align: 		'center',
-				valign:		'center',
-				fade:		0,
-				load:		function() {},
-				complete: 	function() {}
-			};
-			$.extend( true, options, settings );
-
-			loading();
-
-			$new = $background.clone();
-			$new.css( {
-					'position':	'fixed',
-					'left':		'0px',
-					'top':		'0px'
-				})
-				.load( function() {
-					$( window ).bind( 'resize.vegas', function( e ) {
-						resize( $new, options );
-					});
-
-					if ( $current ) {
-						$current.stop();
-						$new.hide()
-							.insertAfter( $current )
-							.fadeIn( options.fade, function() {
-								$('.vegas-background')
-									.not(this)
-										.remove();
-								$( 'body' ).trigger( 'backgroundcomplete', [ this ] );
-								options.complete.apply( $new );
-							});
-					} else {
-						$new.hide()
-							.prependTo( 'body' )
-							.fadeIn( options.fade, function() {
-								$( 'body' ).trigger( 'backgroundcomplete', [ this ] );
-								options.complete.apply( this );	
-							});
-					}
-
-					$current = $new;
-
-					resize( $current, options );
-
-					loaded();
-
-					$( 'body' ).trigger( 'backgroundload', [ $current.get(0) ] );
-					options.load.apply( $current.get(0) );
-				})
-				.attr( 'src', options.src );
-
-			return $.vegas;
-		},
-
-		// Destroy background
-		destroy: function( what ) {
-			if ( !what || what == 'background') {
-				$( '.vegas-background, .vegas-loading' ).remove();
-				$( window ).unbind( 'resize.vegas' );
-				$current = null;
-			}
-
-			if ( !what || what == 'overlay') {
-				$( '.vegas-overlay' ).remove();
-			}
-
-			return $.vegas;
-		},
-
-		overlay:function( settings ) {
-			var options = {
-				src:		null,
-				opacity:	null
-			};
-			$.extend( options, settings );
-
-			$overlay.remove();
-
-			$overlay
-				.css( {
-					'margin':	'0',
-					'padding':	'0',
-					'position':	'fixed',
-					'left':		'0px',
-					'top':		'0px',
-					'width':	'100%',
-					'height':	'100%'
-			});
-
-			if ( options.src ) {
-				$overlay.css( 'backgroundImage', 'url(' + options.src + ')' );
-			}
-
-			if ( options.opacity ) {
-				$overlay.css( 'opacity', options.opacity );
-			}
-
-			$overlay.prependTo( 'body' );
-			
-			return $.vegas;
-		},
-
-		// Start slideshow
-		slideshow: function( settings ) {
-			var options = {
-				delay:		 5000,
-				backgrounds: []
-			};
-			$.extend( options, settings );
-
-			clearInterval( timer );
-
-			var doSlideshow = function() {
-				$.vegas( options.backgrounds[ step++ ] );
-
-				if ( step >= options.backgrounds.length ) {
-					step = 0;
-				}
-			}
-
-			doSlideshow();
-			timer = setInterval( doSlideshow, options.delay );
-
-			return $.vegas;
-		},
-
-		// Stop slideshow
-		stop: function( settings ) {
-			step = 0;
-			clearInterval( timer );
-
-			return $.vegas;
-		},
-
-		// Pause SlideShow
-		pause: function( settings ) {
-			clearInterval( timer );
-
-			return $.vegas;
-		}
-	}
-
-	// Resize the background
-	function resize( $img, settings ) {	
-		var options =  {
-			align: 	'center',
-			valign:	'center'
-		}
-		$.extend( options, settings );
-
-		var ww = $( window ).width(),
-			wh = $( window ).height(),
-			iw = $img.width(),
-			ih = $img.height(),
-			rw = wh / ww,
-			ri = ih / iw,
-			newWidth, newHeight,
-			newLeft, newTop,
-			properties;
-
-		if ( rw > ri ) {
-			newWidth = wh / ri;
-			newHeight = wh;
-		} else {
-			newWidth = ww;
-			newHeight = ww * ri;
-		}
-
-		properties = {
-			'width':	newWidth + 'px',
-			'height': 	newHeight + 'px',
-			'left':		( ww - newWidth ) / 2 + 'px',
-			'top':		( wh - newHeight ) / 2 + 'px'
-		}
-		
-		if ( options.valign == 'top' ) {
-			properties[ 'top' ] 	= 0;
-			properties[ 'bottom' ] 	= 'auto';
-		}
-
-		if ( options.valign == 'bottom' ) {
-			properties[ 'top' ] 	= 'auto';
-			properties[ 'bottom' ] 	= 0;
-		}
-
-		if ( options.align == 'left' ) {
-			properties[ 'left' ] 	= 0;
-			properties[ 'right' ] 	= 'auto';
-		}
-
-		if ( options.align == 'right' ) {
-			properties[ 'left' ] 	= 'auto';
-			properties[ 'right' ] 	= 0;				
-		}
-
-		$img.css( properties );
-	}
-
-	function loading() {
-		$loading.prependTo( 'body' ).fadeIn();
-	}
-
-	function loaded() {
-		$loading.fadeOut( 'fast', function() {
-			$( this ).remove();
-		});
-	}
-
-	// Get the background image from the body
-	function getBackground() {
-		if ( $( 'body' ).css( 'backgroundImage' ) ) {
-			return $( 'body' ).css( 'backgroundImage' ).replace( /url\("?(.*?)"?\)/i, '$1' );
-		}
-	}
-
-	// The plugin
-	$.vegas = function( method ) {
-		if ( methods[ method ] ) {
-			return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
-		} else if ( typeof method === 'object' || !method ) {
-			return methods.init.apply( this, arguments );
-		} else {
-			$.error( 'Method ' +  method + ' does not exist' );
-		}
-	};
+    var $background = $( '<img />' ).addClass( 'vegas-background' ),
+        $overlay    = $( '<div />' ).addClass( 'vegas-overlay' ),
+        $loading    = $( '<div />' ).addClass( 'vegas-loading' ),
+        $current    = $(),
+        paused = null,
+        backgrounds = [],
+        step = 0,
+        timer,
+        methods = {
+
+        // Init plugin
+        init : function( settings ) {
+
+            var options = {
+                src: getBackground(),
+                align: 'center',
+                valign: 'center',
+                fade: 0,
+                loading: true,
+                load: function() {},
+                complete: function() {}
+            }
+            $.extend( options, $.vegas.defaults.background, settings );
+
+            if ( options.loading ) {
+                loading();
+            }
+
+            $new = $background.clone();
+            $new.css( {
+                'position': 'fixed',
+                'left': '0px',
+                'top': '0px'
+            })
+            .load( function() {
+                $( window ).bind( 'resize.vegas', function( e ) {
+                    resize( $new, options );
+                });
+
+                if ( $current.is( 'img' ) ) {
+
+                    $current.stop();
+
+                    $new.hide()
+                        .insertAfter( $current )
+                        .fadeIn( options.fade, function() {
+                            $('.vegas-background')
+                                .not(this)
+                                    .remove();
+                            $( 'body' ).trigger( 'vegascomplete', [ this, step - 1 ] );
+                            options.complete.apply( $new, [ step - 1 ] );
+                        });
+                } else {
+                    $new.hide()
+                        .prependTo( 'body' )
+                        .fadeIn( options.fade, function() {
+                            $( 'body' ).trigger( 'vegascomplete', [ this, step - 1 ] );
+                            options.complete.apply( this, [ step - 1 ] );    
+                        });
+                }
+
+                $current = $new;
+
+                resize( $current, options );
+
+                if ( options.loading ) {
+                    loaded();
+                }
+
+                $( 'body' ).trigger( 'vegasload', [ $current.get(0), step - 1 ] );
+                options.load.apply( $current.get(0), [ step - 1 ] );
+
+                if ( step ) {
+                    $( 'body' ).trigger( 'vegasstep', [ $current.get(0), step - 1 ] );
+                    options.walk.apply( $current.get(0), [ step - 1 ] );
+                }
+            })
+            .attr( 'src', options.src );
+
+            return $.vegas;
+        },
+
+        // Destroy background and/or overlay
+        destroy: function( what ) {
+            if ( !what || what == 'background') {
+                $( '.vegas-background, .vegas-loading' ).remove();
+                $( window ).unbind( 'resize.vegas' );
+                $current = null;
+            }
+
+            if ( what == 'overlay') {
+                $( '.vegas-overlay' ).remove();
+            }
+
+            return $.vegas;
+        },
+
+        // Display the pattern overlay
+        overlay: function( settings ) {
+            var options = {
+                src: null,
+                opacity: null
+            };
+            $.extend( options, $.vegas.defaults.overlay, settings );
+
+            $overlay.remove();
+
+            $overlay
+                .css( {
+                    'margin': '0',
+                    'padding': '0',
+                    'position': 'fixed',
+                    'left': '0px',
+                    'top': '0px',
+                    'width': '100%',
+                    'height': '100%'
+            });
+
+            if ( options.src ) {
+                $overlay.css( 'backgroundImage', 'url(' + options.src + ')' );
+            }
+
+            if ( options.opacity ) {
+                $overlay.css( 'opacity', options.opacity );
+            }
+
+            $overlay.prependTo( 'body' );
+
+            return $.vegas;
+        },
+
+        // Start/restart slideshow
+        slideshow: function( settings, keepPause ) {
+            var options = {
+                step: step,
+                delay: 5000,
+                preload: false,
+                backgrounds: backgrounds,
+                walk: function() {}
+            };
+            options = $.extend( {}, $.vegas.defaults.slideshow, options, settings );
+
+            if ( options.backgrounds != backgrounds ) {
+                if ( !settings.step ) {
+                    options.step = 0;
+                }
+
+                if ( options.preload ) {
+                    $.vegas( 'preload', options.backgrounds )
+                }
+            }
+
+            backgrounds = options.backgrounds;
+            step = options.step;
+
+            clearInterval( timer );
+
+            if ( !backgrounds.length ) {
+                return $.vegas;
+            }
+
+            var doSlideshow = function() {
+                if ( step < 0 ) {
+                    step = backgrounds.length - 1;
+                }
+
+                if ( step >= backgrounds.length || !backgrounds[ step - 1 ] ) {
+                    step = 0;
+                }
+
+                var settings = backgrounds[ step++ ];
+                settings.walk = options.walk;
+
+                $.vegas( settings );
+            }
+            doSlideshow();
+
+            if ( !keepPause ) {
+                paused = false;
+                
+                $( 'body' ).trigger( 'vegasstart', [ $current.get(0), step - 1 ] );
+            }
+
+            if ( !paused ) {
+                timer = setInterval( doSlideshow, options.delay );
+            }
+
+            return $.vegas;
+        },
+
+        // Jump to the next background in the current slideshow
+        next: function() {
+            var from = step;
+
+            if ( step ) {
+                $.vegas( 'slideshow', { step: step }, true );
+
+                $( 'body' ).trigger( 'vegasnext', [ $current.get(0), step - 1, from - 1 ] );
+            }
+
+            return $.vegas;
+        },
+
+        // Jump to the previous background in the current slideshow
+        previous: function() {
+            var from = step;
+
+            if ( step ) {
+                $.vegas( 'slideshow', { step: step - 2 }, true );
+
+                $( 'body' ).trigger( 'vegasprevious', [ $current.get(0), step - 1, from - 1 ] );
+            }
+
+            return $.vegas;
+        },
+
+        // Jump to a specific background in the current slideshow
+        jump: function( s ) {
+            var from = step;
+
+            if ( step ) {
+                $.vegas( 'slideshow', { step: s }, true );
+
+                $( 'body' ).trigger( 'vegasjump', [ $current.get(0), step - 1, from - 1 ] );
+            }
+
+            return $.vegas;
+        },
+
+        // Stop slideshow
+        stop: function() {
+            var from = step;
+            step = 0;
+            paused = null;
+            clearInterval( timer );
+
+            $( 'body' ).trigger( 'vegasstop', [ $current.get(0), from - 1 ] );
+
+            return $.vegas;
+        },
+
+        // Pause slideShow
+        pause: function() {
+            paused = true;
+            clearInterval( timer );
+
+            $( 'body' ).trigger( 'vegaspause', [ $current.get(0), step - 1 ] );
+
+            return $.vegas;
+        },
+
+        // Get some useful values or objects
+        get: function( what ) {
+            if ( what == null || what == 'background' ) {
+                return $current.get(0);
+            }
+
+            if ( what == 'overlay' ) {
+                return $overlay.get(0);
+            }
+
+            if ( what == 'step' ) {
+                return step - 1;
+            }
+
+            if ( what == 'paused' ) {
+                return paused;
+            }
+        },
+        
+        // Preload an array of backgrounds
+        preload: function( backgrounds ) {
+            for( var i in backgrounds ) {
+                if ( backgrounds[ i ].src ) {
+                    $('<img src="' + backgrounds[ i ].src + '">');
+                }
+            }
+
+            return $.vegas;
+        }
+    }
+
+    // Resize the background
+    function resize( $img, settings ) {
+        var options =  {
+            align: 'center',
+            valign: 'center'
+        }
+        $.extend( options, settings );
+
+        var ww = $( window ).width(),
+            wh = $( window ).height(),
+            iw = $img.width(),
+            ih = $img.height(),
+            rw = wh / ww,
+            ri = ih / iw,
+            newWidth, newHeight,
+            newLeft, newTop,
+            properties;
+
+        if ( rw > ri ) {
+            newWidth = wh / ri;
+            newHeight = wh;
+        } else {
+            newWidth = ww;
+            newHeight = ww * ri;
+        }
+
+        properties = {
+            'width': newWidth + 'px',
+            'height': newHeight + 'px'
+        }
+
+        if ( parseInt( options.valign ) != 'NaN' ) {
+            properties[ 'top' ] = ( 0 - ( newHeight - wh ) / 100 * parseInt( options.valign ) ) + 'px';
+        } else if ( options.valign == 'top' ) {
+            properties[ 'top' ] = 0;
+        } else if ( options.valign == 'bottom' ) {
+            properties[ 'bottom' ] = 0;
+        } else {
+            properties[ 'top' ] = ( wh - newHeight ) / 2;
+        } 
+
+        if ( parseInt( options.align ) != 'NaN' ) {
+            properties[ 'left' ] = ( 0 - ( newWidth - ww ) / 100 * parseInt( options.align ) ) + 'px';
+        } else if ( options.align == 'left' ) {
+            properties[ 'left' ] = 0;
+        } else if ( options.align == 'right' ) {
+            properties[ 'right' ] = 0;
+        } else {
+            properties[ 'left' ] = ( ww - newWidth ) / 2 ;
+        }
+
+        $img.css( properties );
+    }
+
+    // Display the loading indicator
+    function loading() {
+        $loading.prependTo( 'body' ).fadeIn();
+    }
+
+    // Hide the loading indicator
+    function loaded() {
+        $loading.fadeOut( 'fast', function() {
+            $( this ).remove();
+        });
+    }
+
+    // Get the background image from the body
+    function getBackground() {
+        if ( $( 'body' ).css( 'backgroundImage' ) ) {
+            return $( 'body' ).css( 'backgroundImage' ).replace( /url\("?(.*?)"?\)/i, '$1' );
+        }
+    }
+
+    // The plugin
+    $.vegas = function( method ) {
+        if ( methods[ method ] ) {
+            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
+        } else if ( typeof method === 'object' || !method ) {
+            return methods.init.apply( this, arguments );
+        } else {
+            $.error( 'Method ' +  method + ' does not exist' );
+        }
+    };
+
+    // Global parameters
+    $.vegas.defaults = {
+        background: {
+            // src:         string
+            // align:       string/int
+            // valign:      string/int
+            // fade:        int
+            // loading      bool
+            // load:        function
+            // complete:    function
+        },
+        slideshow: {
+            // step:        int
+            // delay:       int
+            // backgrounds: array
+            // preload:     bool
+            // walk:        function
+        },
+        overlay: {
+            // src:         string
+            // opacity:     float
+        }
+    }
 })( jQuery );