Features

• Resizes images to fill browser while maintaining image dimension ratio
• No extra whitespace, no scrollbars – the entire browser window is always filled
• Compatible in Firefox, Safari, Opera, IE7, and IE6
• Ability to cycle through images/backgrounds via slideshow

Getting Started

The first thing we are going to want to do is set up the initial CSS/HTML, then get the jQuery in place.

The CSS -

/*Supersize Plugin Styles*/
body {
        overflow:hidden;
}
#supersize img, #supersize a{
 height:100%;
 width:100%;
 display:none;
}
#supersize .activeslide, #supersize .activeslide img{
 display:inline;
}

A couple of key points from above -

1. In order to prevent scrollbars from appearing when the image stretches past the edges of the browser, be sure to include body{overflow:hidden}.
2. The plugin uses the id #supersize to identify what image(s)/elements need to be run. It is the umbrella class for all other elements of the plugin.
3. The .activeslide class tells the plugin which img/div/a is active and therefore needs to be displayed. By default the contents of #supersize should hidden, which means you will need to specify in this section any additional elements you wish to hide/show with each slide (ie Links, Div, Img).

The HTML -

<div id="supersize">
       <img class="activeslide" src="picture.jpg"/>
       <a href="#"><img src="picture2.jpg"/></a>
</div>

Worth noting – As you might have seen from the CSS, the .activeslide class makes whatever element it is attached to visible. For the cases when you wish to make an image a link as well, it will need the above #supersize .activeslide img to make sure the link and the image both appear. If you don’t want to use the slideshow feature you only have to include one image with the .activeclass here. You also will want to shut slideshow off in the options, more on that below.

The jQuery -

First we’ll want to include links to both jQuery and Supersized in the header.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="supersized.1.0.js"></script>

Below, plug this piece in, it is the jQuery that defines any user options you may want to change and then actually calls the plugin to action.

$(function(){
 $.fn.supersized.options = {
  startwidth: 1024,
  startheight: 768,
  minsize: .5,
  slideshow: 1,
  slideinterval: 5000
 };
        $('#supersize').supersized();
});