10

フルサイズの背景画像を表示するために、jQuery 用の特大プラグインを使用しています。画像 () を使用して配列を変更したいがjquery.click()、ページをリロードする必要はありません。リンクは AJAX を介してコンテンツを div にロードし、同時に配列を切り替えたいと考えています。

これは、スーパーサイズ用にロードするデフォルトのコードです。

$.supersized({
    random: 1,
    image_protect: 0,
    slide_interval: 5000,
    transition: 1,
    transition_speed: 3000,
    vertical_center: 0,
    horizontal_center: 0,
    fit_portrait: 1,
    slides:
    [
        {image : 'imgs/bg-01.jpg'},
        {image : 'imgs/bg-02.jpg'},
        {image : 'imgs/bg-03.jpg'},
    ]
});

これは、配列を変更するために行ったことです。

$('#link1').click(function() {
    // placeholder for ajax load

    $.supersized({
        random: 1,
        image_protect: 0,
        slide_interval: 5000,
        transition: 1,
        transition_speed: 3000,
        vertical_center: 0,
        horizontal_center: 0,
        fit_portrait: 1,
        slides:
        [
            {image : 'other-imgs/new-bg-01.jpg'},
            {image : 'other-imgs/new-bg-02.jpg'}
        ]
    });
});

しかし、これは2つの新しい画像を他の3つに追加するだけです.最初の配列をクリアしたり、その内容を置き換えたりするにはどうすればよいですか?

4

3 に答える 3

9

更新しました

これが私がダイナミックスライドでスーパーサイズをリロードし、それが新しいスライドで狂ってしまうのを防ぐために私がすることです（私はスライドから別のスライドにランダムにジャンプして高速化しました）

スライドを更新するために呼び出されるメインの JS ファイルに関数を作成します。

function start_supersized(slides) {
    $('#supersized-loader').empty().remove();
    $('#supersized').empty().remove();
    $('#hzDownscaled').empty().remove();
    $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
    $.supersized({slides: slides}); // add your other SZ options here
};

ここで行っているのは、SZ がドキュメントの本文に追加する DOM 要素を空にして削除し、プラグインを再度初期化することだけです。

次に、スライド配列を引数としてこの関数を呼び出すことができます。つまり、次のようになります。

var new_slides = [{image: "/img/slide1.png"}, {image: "/img/slide2.png"}];
start_supersized(new_slides);

それだけではありません。特大サイズの JS ファイル内の数行を微調整する必要があります (ハックですが、プラグインの作成者からは連絡がありません)。

スクリプトの縮小されていないバージョン、バージョン 3.2.7 では、次のことを行う必要があります。

1）これが発生する最初の行（17行目/20行目など）を削除します

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

アップデート

2) var slideshow_intervals = []; を追加します。

この配列は、プラグインが作成するすべての間隔 ID を追跡します

3) 関数を見つける

    base._start = function() {

（124行目あたり）、関数の先頭に次の行を追加します。

jQuery.each(slideshow_intervals, function(i, e) {
 clearInterval(e);
});

4)setInterval()呼び出しがある場合は、次のように、返された値を配列に追加します。

slideshow_intervals.push(vars.slideshow_interval);

これはすべて、特大のアニメーション間隔をリセットするために使用され、スクリプトがフレーム間で高速化を開始するのを防ぎます。私はそれがちょっとハックであることを知っていますが、ねえ。

于 2012-05-24T13:03:19.123 に答える
0

もう一度特大のスクリプトを呼び出す前に、HTMLコンテンツを次のようにリセットします。

jQuery("#thumb-list").remove();
jQuery("#supersized").html('');

そしてそれは私から働きます。

于 2012-04-13T08:57:55.430 に答える