Vegas
Background
jQuery Plugin

Documentation

Need help? Hire me!

Design & Development by Jay Salvat, Pictures by Sebastien Israel

Back to the Homepage

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 
    }