Mar 17, 2014 in Slideshow 8089 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