0

スライドショーを実行しているCycleがあり、スライドショーにカーソルを合わせると前/次のグラフィックが表示されます。サイクルには、垂直のサムネイルページャーもあります。ページャーをカスタマイズされたバージョンのjCarouselliteでラップしました。これは、アクティブなサムネイルに.activeSlideクラスを配置し、独自の前/次のリンクのセットを持っています。

全体として、それはかなりうまく機能していて、ここで見ることができます：

http://www.spiritlevel.co.uk/cycletest/cycle_test.html

しかし、最後のハードルが1つあります...

スライドショーの前/次のグラフィックをクリックしたときに、新しく.activeSlideがカルーセルに表示されているかどうかを確認したいのですが、表示されていない場合は表示します...そして私は本当に助けを借りて行うことができました。

例を挙げると、上の私のリンクをクリックすると、カルーセルに8つのサムネイルが表示されます。サムネイル1がアクティブです。スライドショーの次のグラフィックをクリックすると、サムネイル2がアクティブになります。もう一度クリックすると、サムネイル3がアクティブになります。8回クリックしてサムネイル9がアクティブになるまでは問題ありません。問題は、サムネイル9がカルーセルに表示されないことです。この時点でコードを入力します。カルーセルをトリガーしてサムネイル9を表示するアクティブにします。（この場合、カルーセルで次のリンクをトリガーすると機能します）

このソリューションでは、ページの読み込みや、ユーザーがスライドショーの前のグラフィック（最後のスライドを表示）をクリックするなどの状況にも対処する必要があります。カルーセルで前のリンクをトリガーすることはここでは機能しません。アクティブなサムネイルを表示するには、次のリンクを複数回トリガーする必要があります。

私が明確になっていることを願っています-私が何をしたいのかを説明するのは実際にはかなり難しいですが、上の私のリンクをクリックするとかなり明白になると思います-説明するよりも見やすいです！

私は本当にこの最後のビットを機能させたいと思います、そしてあなたが与えることができるどんな助けにも感謝します。

ありがとう

4

1 に答える 1

2

多分...

// When clicking the cycle arrows
$('#slidecontrol a').click(function () {
    var activeSlide = $('div.jcarousellite li.activeSlide');

    // If the "activeSlide" in the jcarousel is not already visible
    if (!activeSlide.is(':visible')) {
        // If there are items ABOVE the active slide that are visible we need to go down
        if (activeSlide.prevAll('li:visible').length) {
            var clicker = $('div.nextlite').find('a');
        }
        // Else we need to go up
        else {
            var clicker = $('div.prevlite').find('a');
        }

        // Keep clicking untill it's visible
        while (!activeSlide.is(':visible')) {
            clicker.click();
        }
    }
});
于 2012-02-21T14:10:13.520 に答える