Vegas
Background
jQuery Plugin

Documentation

Need help? Hire me!

Design & Development by Jay Salvat, Pictures by Sebastien Israel

Back to the Homepage

Slideshow

Slideshows of different backgrounds. Transition and callbacks can be easily set up.

Option: backgrounds

Array of backgrounds. It is an array of options for each background to be displayed.

$.vegas('slideshow', {
  backgrounds:[
    { src:'/img/background1.jpg' },
    { src:'/img/background2.jpg' },
    { src:'/img/background3.jpg' }
  ]
})('overlay');

Click to try

Transitions can be set for each background.

$.vegas('slideshow', {
  backgrounds:[
    { src:'/img/bg1.jpg', fade:1000 },
    { src:'/img/bg2.jpg', fade:1000 },
    { src:'/img/bg3.jpg', fade:1000 }
  ]
})('overlay', {
  src:'/vegas/overlays/11.png'
});

Click to try

Option: delay

Delay between two slides in milliseconds. The default value is 5000 milliseconds.

$.vegas('slideshow', {
  delay:2000,
  backgrounds:[
    { src:'/img/bg1.jpg', fade:1000 },
    { src:'/img/bg2.jpg', fade:1000 },
    { src:'/img/bg3.jpg', fade:1000 }
  ]
})('overlay');

Option: step

Start the Slideshow at a specific step.

Option: preload

Preload all the images of the Slideshow.

Callback: walk

Function to be called when the slideshow changes.

$.vegas('slideshow', {
  backgrounds:[
    { src:'/img/bg1.jpg' },
    { src:'/img/bg2.jpg' },
    { src:'/img/bg3.jpg' }
  ],
  walk:function(step) {
    alert( 'N°' +step+ ' is now displayed' );
  }
})('overlay');

Jump

Jump to a specific background in the current Slideshow.

$.vegas('jump', 3); // Go to 4th background

Next & Previous

Jump to the next or previous background in the current Slideshow.

$.vegas('next');

Pause

Pause the current SlideShow. If the same Slideshow is called again, it will start from where it was paused.

$.vegas('pause');

Stop

Stop the current SlideShow. If the same Slideshow is called again, it will start from background one.

$.vegas('stop');

Get

Get some usefull values from the Slideshow as the step or the pause state.

var step = $.vegas('get', 'step'};
var paused = $.vegas('get', 'paused'};

Events & callbacks

Event: vegasstart

Event triggered when a Slideshow has started.

$('body').bind('vegasstart', 
  function(e) {
  	alert( 'A slideshow has started' );
  }
);

Event: vegaswalk

Event triggered when a Slideshow changes.

$('body').bind('vegaswalk',
  function(e, bg, step) {
    alert( 'N°' +step+ ' is now displayed' );
  }
);

Event: vegaspause

Event triggered when a Slideshow is paused.

Event: vegasstop

Event triggered when a Slideshow is stopped.

Event: vegasjump

Event triggered when a jump is asked.

Event: vegasnext & vegasprevious

Event triggered when a jump to the next or previous background is asked.