Full screen random background images on a website

In order to have full screen background images on a website you may consider using a jQuery plug in named Supersized. Supersized is available from http://buildinternet.com/project/supersized/ under the GPL and MIT License.

To get supersized to work properly on a website you have to include some JavaScript and CSS in the head section of your html site.

1. the jQuery plugin
script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"/>

2. the supersized plugin (which you downloaded from the website shown in the first paragraph)
script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"/>

3. the CSS file that comes with the supersized zip from the download
link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />

After including these script and CSS files you can either make a separate javaScript file and include it as well or just use the fallowing code within the head tags of the site you want to use supersized on.


script type="text/javascript">

jQuery(function($){
$.supersized({

//Functionality
slideshow : 1, //Slideshow on/off
autoplay : 1, //Slideshow starts playing automatically
start_slide : 0, //Start slide (0 is random)
random : 0, //Randomize slide order (Ignores start slide)
slide_interval : 6000, //Length between transitions
transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 2000, //Speed of transition
new_window : 0, //Image links open in new window/tab
pause_hover : 0, //Pause slideshow on hover
keyboard_nav : 0, //Keyboard navigation on/off
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, //Disables image dragging and right click with Javascript
image_path : 'img/', //Default image path

//Size & Position
min_width : 0, //Min width allowed (in pixels)
min_height : 0, //Min height allowed (in pixels)
vertical_center : 1, //Vertically center background
horizontal_center : 1, //Horizontally center background
fit_portrait : 0, //Portrait images will not exceed browser height
fit_landscape : 0, //Landscape images will not exceed browser width

//Components
navigation : 0, //Slideshow controls on/off
thumbnail_navigation : 0, //Thumbnail navigation
slide_counter : 0, //Display slide numbers
slide_captions : 0, //Slide caption (Pull from "title" in slides array)
slides : [ //Slideshow Images
{image : 'pics/001.jpg', title : 'Day 3 by Emily Tebbetts', url : 'about.html'},
{image : 'pics/002.jpg', title : 'Film by Emily Tebbetts', url : 'about.html'},
{image : 'pics/003.jpg', title : 'Day 2 by Emily Tebbetts', url : 'about.html'},
{image : 'pics/004.jpg', title : 'Day 2 by Emily Tebbetts', url : 'about.html'},
{image : 'pics/005.jpg', title : 'Day 2 by Emily Tebbetts', url : 'about.html'}
]

});
});

/script>

Looking at the javaScript we can see that there is the possibility to set the start slide variable to "0". As a result the fullscreen background slideshow starts with a random image.
As we can see at the variables above there is a great number of possibilities to tweak the appearance of the background slideshow.