CODEWITHSUNDEEP
javascriptjquerycsspluginssupersized
Spectre
Spectre

Reputation: 121

Supersized jQuery Slideshow into a specific <div>

Any idea how to make Supersize jQuery slideshow work in a specific <div> instead of entire body? Another thread here suggested adding a <div id="supersized"> , it had 0 upvotes and didn't work for me either. Currently it's ignoring all the other elemetns and stays at the background.

Upvotes: 1

Views: 4418

Answers (5)

Hatem Ahmed
Hatem Ahmed

Reputation: 300

you can use the following as a stylesheet , do not use the supersized.css file that come with the plugin

/**************************************** BEGIN: slider *************************************************/
.slider{
    position:relative;
    height:100%;
}
#slidecounter,
#slidecaption{
    overflow:hidden;
    color:#FFF;
    font-size:13px;
    text-transform:capitalize;
    padding:10px 13px;
    line-height:15px;
    position:absolute;
    top:112px;
    right:25px;
    z-index:5;
    background-color:#fff;
    color:#565656;
    font-family: 'Oswald', sans-serif;
    letter-spacing:0.05em;
    border-bottom:2px solid #bdbdbd;
    display:block;
}

ul#slide-list{
    float:right; 
    height:25px; 
    bottom:25px; 
    right:25px; 
    z-index:9999999; 
    position:absolute;
}
ul#slide-list li{
    list-style:none; 
    width:15px; 
    height:15px; 
    float:left; 
    margin-left:5px;
}
ul#slide-list li:first-child{margin:0;}
ul#slide-list li.current-slide a, 
ul#slide-list li a:hover{background-color:#fff;}
ul#slide-list li a{
    display:block; 
    width:15px; 
    height:15px; 
    background-color:#eee; 
    background-color:rgba(255,255,255,0.6); 
    cursor:pointer;
}

#progress-back{
    z-index:5; 
    position:absolute; 
    bottom:0px; 
    left:0; 
    height:5px; 
    width:100%; 
    background:url(../images/progress-back.png) repeat-x;
}
#progress-bar{
    position:relative; 
    height:5px; 
    width:100%;
    background:#666666;
}

#supersized-loader{
    position:absolute; 
    top:50%; 
    left:50%; 
    z-index:0; 
    width:60px; 
    height:60px; 
    margin:-30px 0 0 -30px; 
    text-indent:-999em; 
    background:url(../images/progress.gif) no-repeat center center;
}
#supersized{
    display:block; 
    position:absolute; 
    left:0; top:0; 
    overflow:hidden; 
    z-index:1; 
    height:100%; 
    width:100%;
}
#supersized img{
    width:auto; 
    height:auto; 
    position:relative; 
    display:none; 
    outline:none; 
    border:none; 
}
#supersized.speed img{
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering: -moz-crisp-edges;
}
#supersized.quality img{
    -ms-interpolation-mode:bicubic; 
    image-rendering: optimizeQuality;
}
#supersized li{
    display:block; 
    list-style:none; 
    z-index:-30; 
    position:absolute; 
    overflow:hidden; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#111;
}
#supersized a{
    width:100%; 
    height:100%; 
    display:block; 
}
#supersized li.prevslide{z-index:-20;}
#supersized li.activeslide{z-index:-10;}
#supersized li.image-loading{
    background:#111 url(../img/progress.gif) no-repeat center center; 
    width:100%; 
    height:100%; 
}
#supersized li.image-loading img{visibility:hidden;}
#supersized li.prevslide img, #supersized li.activeslide img{display:inline;}

#prevslide, #nextslide{ position:absolute; height:45px; width:45px; top:50%; margin-top:-23px; opacity:0.3; z-index:2; }
#prevslide{ left:10px; background:url(../images/back.png); }
#nextslide{ right:10px; background:url(../images/forward.png); }
#prevslide:active, #nextslide:active{ margin-top:-19px; }
#prevslide:hover, #nextslide:hover{ cursor:pointer; }
/**************************************** END: slider *************************************************/

Upvotes: 0

danielgc
danielgc

Reputation: 319

I had the same problem and this tutorial saved me http://arushad.org/how-to-use-supersized-inside-a-div-for-a-background-image-slideshow/

Upvotes: 0

LeBron
LeBron

Reputation: 1

I changed about 4 or 5 position attributes found under supersized.css and supersized.shutter.css from fixed to absolute and this allows you to add content below the image slide show.

Upvotes: 0

dino
dino

Reputation: 1

no need to create or add another div. just set the position from fixed to absolute. the background image will start at the top. you can adjust the positioning with top or left since its an absolute div.

Upvotes: 0

ROY Finley
ROY Finley

Reputation: 1416

This is the first line of the jQuery for Supersized;

(function(a){a(document).ready(function(){
a("body").append('<div id="supersized-loader"></div><ul id="supersized"></ul>')
});

Based on that they tell you in the documentation to do the following if you do not want to use it full screen:

You can define the dimensions by adjusting the #supersized styles in the CSS file. You will want to make all instances of position:fixed -> position:absolute.

Upvotes: 1

Related Questions