0

Jquery Supersizedプラグインを使用していて、使用する画像のリストを作成するためのより良い方法が必要でした。

私はここでこれと同じ質問を見つけましたjQuerySupersized：LIから画像をロードしますが、ソリューションの実装に問題があります。

私はこのような画像の名前を持つULを持っています：

<ul id="slide_list">
<li><div class="slide_src">pic1.jpg</div>
<div class="slide_head">head 1</div></li>

<li><div class="slide_src">pic2.jpg</div>
<div class="slide_head">head 2</div></li>

<li><div class="slide_src">pic3.jpg</div>
<div class="slide_head">head 3</div></li>

</ul>

次に、提供されているコードjfriend00を使用して、このリストから配列を作成します。

var slides = [];           
$("ul .image").each(function() {
    var this$ = $(this);
    var obj = {};
    obj.image = this$.text();
    obj.title = this$.nextAll(".slide_src").text();
    obj.thumb = this$.nextAll(".slide_head").text();
    slides.push(obj);
});​​​​​​​​​​​​​​​

私の問題は、このスライド配列を超大型のスクリプトで使用しようとすると、「「スライド」が未定義です」というエラーが表示されることです。

私の超大型コードは次のようになります：

jQuery(function($){
    $.supersized({

        //Functionality
        slideshow               :   1,      //Slideshow on/off
        autoplay                :   1,      //Slideshow starts playing automatically
        start_slide             :   1,      //Start slide (0 is random)
        random                  :   0,      //Randomize slide order (Ignores start slide)
        slide_interval          :   5000,   //Length between transitions

        //Components
        navigation              :   0,      //Slideshow controls on/off
        thumbnail_navigation    :   0,      //Thumbnail navigation
        slide_counter           :   0,      //Display slide numbers
        slide_captions          :   0,      //Slide caption (Pull from "title" in slides array)
        slides                  : slides
    }); 
});

（簡潔にするために、特大のオプションコードの一部を削除しました）。

スライド配列の内容をコンソールに表示すると表示さ
[object Object],[object Object],[object Object] れるので、何か間違ったことをしていることがわかります...

私がこれを使用する場合： slidesDisp = JSON.stringify(slides)

配列はコンソールに完全に表示され [{"image":"pic1.jpg","title":"head 1"},{"image":"pic2.jpg","title":"head 2"},{"image":"pic3.jpg","title":"head 3"}] ますが、超大型のスクリプトで使用しても何も起こりません

slides: slidesDisp

私が間違っていることへの提案はありますか？

4

1 に答える 1

3

HTMLがJavaScriptと一致せず、.imageクラスがありません。また、別のDOM対応スコープでスーパーサイズのプラグインを初期化しないようにしてください。

$(function() {

    var slides = [];    

    $("ul .slide_src").each(function() {
        var $this = $(this);
        var obj = {};
        obj.image = $this.text();
        obj.title = $this.next(".slide_head").text();
        slides.push(obj);
    });​​​​​​​​​​​​​​​

    $.supersized({
        // ...........other options
        slides                  : slides
    });
});
于 2012-12-27T21:24:21.677 に答える