Submit your widget

Supersized Slideshow jQuery Plugin

Created 13 years ago   Views 25673   downloads 3835    Author buildinternet
Supersized Slideshow jQuery Plugin
View DemoDownload
Share |


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


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


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


Turns the slideshow on/off. This includes the slide captions, counter, and 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


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.


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


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


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.


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


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.