Documentation

Background

Option: src

Background image to display.

$.vegas({
  src:'/img/background.jpg'
});

Click to try

If no src is set, the background image defined for the body by CSS is used.

$.vegas();

Option: fade

Fading effect duration. The value is in milliseconds. By default the value is 0.

$.vegas({
  src:'/img/background.jpg',
  fade:5000 // milliseconds
});

Click to try

Options: align & valign

Horizontal or vertical alignements of the background. By default, the background is centered.

$.vegas({
  src:'/img/background.jpg',
  valign:'20%', // top, center, bottom or %
  align:'right' // left, center, right or %
});

Option: loading

Show or hide the loading indicator. By default the indicator is shown.

Events & callbacks

Callback: load

Function to be called after a background is loaded.

$.vegas({
  src:'/img/background.jpg',
  load:function() {
    var img = $(this).attr('src');
    alert( img + ' is loaded' );
  }
});

Click to try

Callback: complete

Function to be called after a background is completely displayed, at the end of a fading transition for instance.

$.vegas({
  src:'/img/background.jpg',
  fade:2000,
  complete:function() {
    var img = $(this).attr('src');
    alert( img + ' is completed' );
  }
});

Click to try

Event: vegasload

Event triggered when a background is loaded.

$('body').bind('vegasload', 
  function(e, bg) {
    var img = $(bg).attr('src');
    alert( img + ' is loaded' );
  }
);

Event: vegascomplete

Event triggered when a background is completely displayed.

$('body').bind('vegascomplete', 
  function(e, bg) {
    var img = $(bg).attr('src');
    alert( img + ' is completed' );
  }
);

Destroy

Remove the background completely.

$.vegas('destroy');

Click to try

Get

Get the current background jQuery object.

var overlay = $.vegas('get', 'background');