Supersized - Full Screen Slideshow jQuery Plugin

Supersized - Full Screen Slideshow jQuery Plugin


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();
});

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.

We are done! You can now view the final result. As always please feel free to leave a comment to JoomlaOutsourceIndia@gmail.com.