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,
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

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.

Demos

I've put together a few example customizations:

Legacy Versions

Supersized 1.0 (2/04/09) - supersized.1.0.zip (Original Post)

Some Notes

The above section provides a sampling of demos (also included in the download) which can also act as templates for many projects.

Here are a couple rules to keep in mind while editing:

  • All images within the #supersize div must be included in an 'a' link tag
  • Be mindful of z-index - anything you want on top of the slide should be >= 3

A special thanks goes out to Aen for taking the time to make some improvements between Version 1 and 2, most notably the fade effect.