Question

I am trying to incoporate a homepage using the jquery supersized plugin to display a slideshow that fills the page with the image, with the exception of a navigation bar at the bottom of the page.

The navigation bar is 110px high with a width of 100%. The problem I am having is getting the images to “stop” at 110pixels from the bottom of the page. I have played around with the supersized css file I downloaded with the plugin but nothing seems to be doing the trick.

Does anyone know if it is possible, or whether there are any other full screen slideshows I might be able to use that will allow for a space at the bottom of the page?

Thanks
JD

Answer 1

You can’t only modify the CSS.

You need to understand how this plugin work.

First, it create a div at the bottom of your page. This div got the following CSS :

#supersized {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -999;
}

This style make it the size of your screen and put it under all other content.

Second, inside that div, you have an IMG.
This image have the following style :

#supersized img {
    border: medium none;
    height: auto;
    image-rendering: optimizequality;
    outline: medium none;
    position: relative;
    width: auto;
}

However, part of this style is Overwritten by the plugin!

<img src="img.jpg" style="width: 1672.22px; left: -4px; top: 0px; height: 602px;" />

And this style is defined in the plugin JS core.

If you want to make your picture 110px less high than what the plugin do, you’ll have to also change the following line (supersized.3.1.3.core.js, line 84):

//Gather browser size
var browserwidth = $(window).width();
var browserheight = $(window).height();
var offset;

…Which is rather hard are if you are using the minified version.

Other suggestion : [Look at the supersized demo(http://buildinternet.com/project/supersized/slideshow/3.2/demo.html) and do a similar navigation bar (transparent!), or allow the user to hide the navigation bar (hide it in a corner) if they really want the 110px.