jQuery - スライド以外の要素を「スライド」イベントにリッスンさせる

Question

私が作成しているページにjQuery UIスライダがあります。それはスライドショーのタイプを制御しています。

スライドショーの各要素でスライダのスライドイベントをリスンする必要があります。イベントが発生すると、各要素は自身の位置を評価し、スライドショーの可視領域にあるかどうかを判断します。そうであれば、それはそれ自身のイメージをロードし、それからそのスライドイベントのリスナーを削除します。

各要素が独自の画像読み込みを管理することが目的です。 jQueryでこれを達成できる方法はありますか？

Answer 1

jQueryのカスタムイベントを使用して、このようなリスナーを設定するのが好きです。 http://www.spookandpuff.com/examples/SliderPublishEvents.html

は基本的に、あなたは（など、画像をロードし、位置を決定することが必要なロジックを全て実行する（私の例では「更新」と呼ばれる）各スライドにカスタムイベントハンドラをバインドします。ここでは

は一例です）。スライドごとに、イベントをトリガーすることができます（ $(slide).trigger('update')）。

すべてのスライドを更新するには、イベントをスライダ自体（またはすべてのスライドのコンテナ）にバインドします。私の例では、これは「リフレッシュ」と呼ばれています。このすべては、すべてのスライドに「更新」イベントをトリガしているん：

slider.bind('refresh', function(event, position){ 
    slides.trigger('update', [position]); 
}); 

[位置]パラメータは、jQueryのの「スライド」イベントから入手することができ、スライダーの位置を取るように設計されています。 （これは、jQueryがこのデータを処理する方法のため、単一項目の配列として設定されています。これはちょっとしたことです）。

スライダを設定する際に、そのようにコールバックを割り当てる：

$('#slider').slider({ 
    slide:function(event, ui){ 
     slider.trigger('update', [ui.value]); 
    } 
}); 

そして、それはスライド自体のリフレッシュイベントハンドラに各スライドのためのロジックを置くだけの問題です。あなたもそれに助けが必要ですか？