2

jCarousel (http://sorgalla.com/projects/jcarousel/) を使用して画像のプレビューを作成していますが、1 つの問題に直面しました。jCarousel 動的リストを再読み込み/更新する方法がわかりません。

画像のカテゴリはほとんどありません。その中の画像をクリックすると、リストが作成され、その要素からプレビューが開始される必要があります。私はいくつかのコードを持っていますが、プレビューが他の画像で始まる他の画像をクリックした後にすべてのリストを再作成する方法がわかりません。ここに私のコードがあります:

$(document).ready(function(){
$("ul#stage li").live('click', function() {

    var ul = $(this).parent();
    var index = +(ul.children().index(this))+1;

    var mycarousel_itemList = [ ];

    $('li[data-id]').each(function () {
        var $this = $(this);
            mycarousel_itemList.push({
                url : $this.attr("data-img"),
                title : $this.attr("data-title")
            });
    });

    function mycarousel_itemLoadCallback(carousel, state) {
        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }
            if (i > mycarousel_itemList.length) {
                break;
            }
            carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
        }
    };

    function mycarousel_getItemHTML(item) {
        return '<img src="' + item.url + '" width="800" height="600" alt="' + item.url + '" />';
    };
        alert(index);
    jQuery('#mycarousel').jcarousel({
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback},
        size: mycarousel_itemList.length,
        scroll: 1,
        start: index,
        wrap: 'last',
        animation: 'fast',
        visible: 1
    });

    document.getElementById('popup-content').style.background='url('+$(this).attr("data-img")+') no-repeat center';
    document.getElementById('fades').style.display='block';
    document.getElementById("light").style.display = "block";
    $("#light").fadeTo("slow", 1);
});
});

すべてがそのようなものです：画像があります>それらの1つをクリックします> jCarouselと1つの可視画像でポップアップが表示され、他のすべての画像をスクロールできます。

うまく機能していますが、初めてです。（ポップアップを閉じた後）他の画像をクリックすると、最後に開いた画像からビューが始まります。

不明な点がある場合は、お問い合わせください。もっと正確に作ってみます。ご協力いただきありがとうございます！

4

1 に答える 1

1

jCarousel を再作成できます。最初に $('#mycarousel').remove(); を使用します。次に、jCarousel をもう一度初期化します。あなたが何をしようとしているのかよくわかりませんでしたが、これはほとんどの場合に役立ちます。もちろん、jCarousel には Destroy メソッドが必要ですが、そうではありません。

また、場合によっては jquery セレクターを使用しないのはなぜですか?

于 2012-09-15T18:36:29.460 に答える