javascript - 特定のサイズの jQuery スライドショー

Question

Supersize jQuery スライドショー<div>を全身ではなく特定の部分で機能させる方法はありますか? ここに別のスレッドが追加することを提案しまし<div id="supersized">た.0の賛成票があり、私にとってもうまくいきませんでした。現在、他のすべての要素を無視してバックグラウンドにとどまっています。

Answer 1

これは Supersized の jQuery の最初の行です。

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

それに基づいて、フルスクリーンで使用したくない場合は、ドキュメントで次のことを行うように指示されています。

CSS ファイルの #supersized スタイルを調整することで、寸法を定義できます。position:fixed -> position:absolute のすべてのインスタンスを作成する必要があります。

Answer 2

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/

Answer 3

以下をスタイルシートとして使用できます。プラグインに付属の supersized.css ファイルは使用しないでください

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