// ---------------------------------------------------------------------------- // Vegas - jQuery plugin // Add awesome fullscreen backgrounds to your webpages. // v 1.0 beta // Dual licensed under the MIT and GPL licenses. // http://vegas.jaysalvat.com/ // ---------------------------------------------------------------------------- // Copyright (C) 2011 Jay Salvat // http://jaysalvat.com/ // ---------------------------------------------------------------------------- // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files ( the "Software" ), to deal // in the Software without restriction, including without limitation the rights // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of the Software, and to permit persons to whom the Software is // furnished to do so, subject to the following conditions: // // The above copyright notice and this permission notice shall be included in // all copies or substantial portions of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. // ---------------------------------------------------------------------------- ( function( $ ){ var $background = $( '' ).addClass( 'vegas-background' ), $overlay = $( '
' ).addClass( 'vegas-overlay' ), $loading = $( '
' ).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' ); } }; })( jQuery );