Documentation

Set up

First, include jQuery.

<script 
  type="text/javascript"
  src="/jquery.js">
</script>

Include the plugin.

<script 
  type="text/javascript"
  src="/vegas/jquery.vegas.js">
</script>

Then, include the stylesheet.

<link 
  rel="stylesheet" 
  type="text/css" 
  href="/vegas/jquery.vegas.css" />

Finally, call the plugin with the options you want...

$(function() {
  $.vegas({
    src:'/images/background.jpg'
  });
  $.vegas('overlay', {
    src:'/vegas/overlays/13.png'
  });
});

Click to try

Oh wait! Vegas methods are also chainable.

$(function() {
  $.vegas({
    src:'/images/background.jpg'
  })('overlay', {
    src:'/vegas/overlays/13.png'
  });
});

Defaults values

All the defaults values can be edited. Read more about those settings in the next sections.

$.vegas.defaults = {
  background: {
    src:         null, // defined by Css
    align:       'center',
    valign:      'center',
    fade:        0,
    loading      true,
    load:        function(){},
    complete:    function(){}
  },
  slideshow: {
    step:        0,
    delay:       5000,
    backgrounds: [],
    preload:     false,
    walk:        function(){}
  },
  overlay: {
    src:         null, // defined by Css 
    opacity:     null  // defined by Css 
  }
}