I am using the vegas slider as a background image for a site I am building. I have it working and configured to my liking, however my end goal is to be able have a random image load every page load.
I have seen methods on how to do that separately but I am not quite sure how I would alter/add on to this existing js to implement that.
Any helpful links or tutorials or suggestions would be greatly appreciated.
Thanks in advance.
( function( $ ){
var $background = $( '<img />' ).addClass( 'vegas-background' ),
$overlay = $( '<div />' ).addClass( 'vegas-overlay' ),
$loading = $( '<div />' ).addClass( 'vegas-loading' ),
$current = $(),
paused = null,
backgrounds = [],
step = 0,
delay = 5000,
walk = function() {},
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();
}
var $new = $background.clone();
$new.css( {
'position': 'fixed',
'left': '0px',
'top': '0px'
})
.imagesLoadedForVegas( 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( 'resize.vegas' );
$current = $();
}
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: delay,
preload: false,
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;
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 );
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',
'top': 'auto',
'bottom': 'auto',
'left': 'auto',
'right': 'auto'
}
if ( !isNaN( parseInt( options.valign ) ) ) {
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 ( !isNaN( parseInt( options.align ) ) ) {
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: {
// fade: null
// step: int
// delay: int
// backgrounds: array
// preload: bool
// walk: function
},
overlay: {
// src: string
// opacity: float
}
}
/*!
* jQuery imagesLoaded plugin v1.0.3
* http://github.com/desandro/imagesloaded
*
* MIT License. by Paul Irish et al.
*/
$.fn.imagesLoadedForVegas = function( callback ) {
var $this = this,
$images = $this.find('img').add( $this.filter('img') ),
len = $images.length,
blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
function triggerCallback() {
callback.call( $this, $images );
}
function imgLoaded() {
if ( --len <= 0 && this.src !== blank ){
setTimeout( triggerCallback );
$images.unbind( 'load error', imgLoaded );
}
}
if ( !len ) {
setTimeout( triggerCallback, 200 );
// triggerCallback();
}
$images.bind( 'load error', imgLoaded ).each( function() {
// cached images don't fire load sometimes, so we reset src.
if (this.complete || this.complete === undefined){
var src = this.src;
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
// data uri bypasses webkit log warning (thx doug jones)
this.src = blank;
this.src = src;
}
});
return $this;
};
})( jQuery );
Write a jquery functon which ramdomize the array of images and return, then assigned the returned array
to the background option of the plugin