Mar 17, 2014 in Slideshow 8488 views
Vegas is a jQuery plugin to add beautiful fullscreen backgrounds to your webpages. You can even create amazing Slideshows.
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'
});
});
Oh wait! Vegas methods are also chainable.
$(function() {
$.vegas({
src:'/images/background.jpg'
})('overlay', {
src:'/vegas/overlays/13.png'
});
});
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
}
}
Tagged with:
background
image slideshow
overlay
fullscreen slideshow
fullscreen background
jquery
vegas
beautiful fullscreen
amazing slideshows
Related Articles
JS Tutorial