Features

So, what exactly does Supersized do?

• Resizes images to fill browser while maintaining image dimension ratio
• Cycles Images/backgrounds via slideshow with transitions and preloading
• Navigation controls allow for pause/play and forward/back

Options

There are a number of available options, shown below with their default values:
For options able to be turned on/off - 1 is on, 0 is off

startwidth: 4,
startheight: 3,
vertical_center: 1,
slideshow: 1,
navigation:1,
thumbnail_navigation:0,
transition: 1,
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 5000

startwidth, startheight

The width and height are used to calculate the ratio used in resize. All images in the slideshow must have the same ratio in order to prevent distortion (ex. 1280 x 960, 1024 x 768). The default ratio is fullscreen 4:3.

vertical_center

Centers image vertically. When turned off, the images resize/display from the top left corner.

slideshow

Turns the slideshow on/off. This includes the slide captions, counter, and navigation.

navigation

Turns the navigation on/off. When turned off, any code pertaining to pause/play and forward/back is skipped over and the #navigation is hidden.

For custom navigation button images, replace the following in the '/images' folder:
pause.gif, play.gif, forward.gif, back.gif,
pause_dull.gif, play_dull.gif, forward_dull.gif, back_dull.gif

thumbnail_navigation

Turn forward/backward thumbnail navigation on/off. When on, thumbnails from the next/previous posts are generated and can be clicked to navigate. Automatically puts thumbnails in #nextthumb and #prevthumb.

transition

Controls which effect is used to transition between slides. Options are as follows:

• 0: No transition effect
• 1: Fade effect (Default)
• 2: Slide in from top
• 3: Slide in from right
• 4: Slide in from bottom
• 5: Slide in from left

pause_hover

Pauses slideshow while current image hovered over. If navigation is enabled, pause button will become active to show paused state. Disabled by default.

slide_counter

Enables/Disables the slide counter. Supersized looks for #slide_counter, then puts the current slide number in .slidenumber and total slides in .totalslides, allowing for easy styling/formatting.

slide_caption

Enables/Disables slide captions. The caption is defined by what is in the title attribute in the current image and then displayed in #slidecaption.

slide_interval

Time between slide changes in milliseconds. The default is 5 seconds.

Some Notes

The demos section (also included in the download) can act as template/good start for many projects.

For those just interested in the fullscreen background functionality, use the supersized.3.0.core.js file.