1

jQuery ツールを使用して、単純なスクロール可能なフォト ギャラリーを実装しました。
次に、jQuery ツールのスクローラーに自動スクロール動作を追加して、写真のスライド ショーを作成しました。
次に、jQuery カラーボックスを写真のスライド ショーに添付して、より大きなバージョンの画像を提供しました。

私は次の問題に直面しています。動作は予測できない場合があるため、可能な限り最善の方法で説明できることを願っています。

主な問題は、スライドショーを停止し、画像をクリックしてカラーボックスまたは次/前のボタンを表示すると、スライドショーが再び開始されることです。この動作を無効にする方法はありますか??

もう 1 つの問題は、カラーボックスをクリックすると、7 つではなく 9 つの画像があるように見えることです。写真をクリックして、ズームされた写真の右上にカラーボックスが生成するインデックスを表示することで確認できます。
なぜこうなった？説明が見つかりません。

最後に、2 回発生し、再現できない最も厄介な部分は、カラーボックスを開いたり閉じたりすると、ある時点で jQuery ツールがスクロール可能になり、インデックスが台無しになり、追加のステップがスクロールされて、存在しない空白の写真が表示されることです..これまた、左下にある現在の写真番号の表示、つまりナビゲーションを台無しにします。

これら 2 つのライブラリは必ずしも連携することを意図していないことはわかっていますが、誰かが同じスクリプトまたは関連するスクリプトを実行した場合に備えて、ここにこれらの質問を投稿しました。
どんな助けでも大歓迎です。

Javascript コード: 

$("#gallery").scrollable({circular:true}).autoscroll({autoplay:true});
var api = $("#gallery").data("scrollable");
var indd = api.getIndex();

api.onSeek(function() {
    $("#cur-p").html(parseInt(api.getIndex()+1));
    $("#tot-p").html(api.getSize());
});

$("#slid").toggle(function() {
        api.stop();
        $(this).html("SLIDESHOW ON");
        return false;
    }, function() {
        api.play();
        $(this).html("SLIDESHOW OFF");
        return false;
    }

);

$("#cur-p").html(parseInt(api.getIndex()+1));
$("#tot-p").html(api.getSize());

$("a[rel=color-box]").colorbox();

* 更新* これまでのところ、奇妙な動作の 1 つを把握することができました。
カラーボックスには、存在するよりも多くの合計画像が表示されます。これは、autoscroll プラグインの後に呼び出されるためです。自動スクロールは、循環プロパティがオンの場合、開始前と終了後に 1 つずつ 2 つの余分な div を作成します。したがって、カラーボックスはそれらを見つけて方程式に追加します。

autoscroll をまったく呼び出さない場合、カラーボックスは正常に動作します。
したがって、解決策は次のように colorbox を呼び出すことです。 

$("#gallery").scrollable().find("a[rel=color-box]").colorbox();

colorbox の読み込みが完了したら、autoscroll プラグインをギャラリーに適用します。ただし、既に作成されたスクロール可能なインスタンスに自動スクロールを適用する方法がわかりません。

4

0 に答える 0