- Feb 04, 2009
- 177 Comments
- Resources
Supersized – Full Screen Background/Slideshow jQuery Plugin
This is an outdated version! Supersized has been moved and updated to a more permanent home at the official Supersized project page. Check there for the latest release notes and features!
If you are interested in this specific legacy version, you can download it here for now.
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 -
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*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 -
- In order to prevent scrollbars from appearing when the image stretches past the edges of the browser, be sure to include body{overflow:hidden}.
- 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.
- 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 -
|
1 2 3 4 |
<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.
|
1 2 |
<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.
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $.fn.supersized.options = { startwidth: 1024, startheight: 768, minsize: .5, slideshow: 1, slideinterval: 5000 }; $('#supersize').supersized(); }); |
Options
Now for all of those Nancy Drew super sleuths out there, you might have already noticed that you have options to play around with. For the rest of you, it’s okay, below outlines them in more detail.
startwidth & startheight - It is important that you specify the image size(s) in this area. These used to develop a ratio and minimum size. If you are planning on using the slideshow and images of various sizes, it will still work as long as they have the same ratios (ie 4:3 / 16:9). For these cases I would suggest using the dimensions of one of the smaller ones in the batch, as it won’t mess up minimum sizes on smaller images. For now all images must be the same ratio to display them in the proportions they were intended to be, although in a future release I will look to add auto-detection. The default dimensions are 1024 x 768.
minsize - This is the decimal form of the minimum percent for the starting width / height that you want the image to be. The default is 50% of the starting size of the image.
slideshow - This turns the slideshow feature on and off. If it is 1 then it is on, anything else… it’s not.
slideinterval - This is the amount of time spent on each image in the slideshow in milliseconds. Play with it accordingly.
Inspiration
This is my first jQuery plugin, I was inspired by the apparent lack of jQuery support for a feature that Flash can do so nicely. In my hunt for an existing plugin I came across two helpful/interesting discussions on the topic.
Chris Coyier explored this problem over at his site, coming up with a preliminary jQuery fix but ultimately landing on a rather efficient/close method in CSS.
Over at Sitepoint forums a similiar thread came up, providing a neat mooTools example and alternate CSS fix, however both faced issues with browser compatibility.
The trend seemed to be that one could either fill the browser and disregard the image ratio or keep the ratio but be faced with white space upon resizing. The only working instance I found was over at Adult Swim, which accomplished a autosizing slideshow, but does so without jQuery.
Future Plans
The clear next step is to add effects to the slide transitions, as well as forward/back buttons to control the slides.
I am a fan of Adult Swim’s example, which will be a source of inspiration for the next round.
I also hope to add auto detection of image sizes, which would allow for images of all shapes and sizes to play nice together.
While body{overflow:hidden} means that content would get cut off in a full blown website, I am interested in working out a fix other than a fluid layout/allowing for scroll bars.
If you use Supersized in one of your projects, please let me know, I’d love to see what you’ve done and include you as an example.
I am always receptive to any thoughts/suggestions you might have, so have words with me in the comments.
