// ---------------------------------------------------------------------------- // Vegas – Fullscreen Backgrounds and Slideshows with jQuery. // Licensed under the MIT license. // http://vegas.jaysalvat.com/ // ---------------------------------------------------------------------------- // Copyright (C) 2013 Jay Salvat // http://jaysalvat.com/ // ---------------------------------------------------------------------------- (function($) { var $background = $('').addClass('vegas-background'), $overlay = $('
').addClass('vegas-overlay'), $loading = $('
').addClass('vegas-loading'), $current = $(), paused = null, backgrounds = [], step = 0, delay = 5000, walk = function() {}, timer, isIPhone = (navigator.userAgent.match(/iPod|iPhone/i)), IPhoneHeightOffset = 76, 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(); } var $new = $background.clone(); $new.css({ 'position': 'fixed', 'left': '0px', 'top': '0px' }) .bind('load', function() { if ($new == $current) { return; } $(window).bind('load 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('vegaswalk', [$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('*.vegas'); $current = $(); } if (!what || what == 'overlay') { $('.vegas-overlay').remove(); } clearInterval(timer); 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 === false) { $overlay.css('backgroundImage', 'none'); } 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: delay, preload: false, loading: true, backgrounds: backgrounds, walk: walk }; $.extend(options, $.vegas.defaults.slideshow, settings); if (options.backgrounds != backgrounds) { if (!settings.step) { options.step = 0; } if (!settings.walk) { options.walk = function() {}; } if (options.preload) { $.vegas('preload', options.backgrounds); } } backgrounds = options.backgrounds; delay = options.delay; step = options.step; walk = options.walk; 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; settings.loading = options.loading; if (typeof(settings.fade) == 'undefined') { settings.fade = options.fade; } if (settings.fade > options.delay) { settings.fade = options.delay; } $.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) { var cache = []; for(var i in backgrounds) { if (backgrounds[i].src) { var cacheImage = document.createElement('img'); cacheImage.src = backgrounds[i].src; cache.push(cacheImage); } } return $.vegas; } }; // Resize the background function resize($img, settings) { var options = { align: 'center', valign: 'center' }; $.extend(options, settings); if($img.height() === 0) { $img.load(function(){ resize($(this), settings); }); return; } var vp = getViewportSize(), ww = vp.width, wh = vp.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', 'top': 'auto', 'bottom': 'auto', 'left': 'auto', 'right': 'auto' }; if (!isNaN(parseInt(options.valign, 10))) { properties.top = (0 - (newHeight - wh) / 100 * parseInt(options.valign, 10)) + 'px'; } else if (options.valign == 'top') { properties.top = 0; } else if (options.valign == 'bottom') { properties.bottom = 0; } else { properties.top = (wh - newHeight) / 2; } if (!isNaN(parseInt(options.align, 10))) { properties.left = (0 - (newWidth - ww) / 100 * parseInt(options.align, 10)) + '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'); } } // Get the real viewport size function getViewportSize(){ var elmt = window, prop = 'inner'; if (!('innerWidth' in window)){ elmt = document.documentElement || document.body; prop = 'client'; } return { width: elmt[prop + "Width"], height: isIPhone ? elmt[prop + "Height"] + IPhoneHeightOffset : elmt[prop + "Height"] }; } // 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: { // fade: null // step: int // delay: int // backgrounds: array // loading bool // preload: bool // walk: function }, overlay: { // src: string // opacity: float } }; })(jQuery);