超大jQuery幻灯片放到特定的<div>

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

我将在supersized.css和supersized.shutter.css下找到的大约4或5个位置属性从固定更改为绝对，这使您可以在图像幻灯片下方添加内容。

Answer 4

我遇到了同样的问题，本教程为我节省了http://arushad.org/how-to-use-supersized-inside-a-div-for-a-background-image-slideshow/

Answer 5

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 *************************************************/