元の問題は解決しましたが、もっとエレガントな解決策があるかどうか疑問に思っています。Foundation の Orbit を使用してスライドショーを作成しています。これは単純なスライド ショーではなく、各スライドにデータ キャプションが定義されているスライド ショーであり、このデータ キャプション内にモーダル ダイアログをロードする必要がある HTML があります。
Foundation を使用している場合は、Reveal ライブラリを使用してモーダル ダイアログを表示することをすぐに考えます。(これらは要件です。)問題は、データ キャプションの要素が、次の元の初期化呼び出しの影響を受けないことです。
$("a[rel^='prettyPhoto']").prettyPhoto();
私がしなければならないことは、ロードされたときに各データキャプションを確実に初期化することです。さて、ここで問題です。afterSlideChange イベントを使用してスライドのトランジションでこれを解決しましたが、問題は最初のスライドです。表示される最初のスライドに対してこのメソッドを呼び出す必要があります。
この問題を解決するコードは次のとおりです。
<script type="text/javascript">
$(window).load(function () {
$('#featured').orbit({
afterSlideChange:function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
default_width:640,
default_height:500,
theme:'light_square'
});
}, // empty function
fluid:true // or set a aspect ratio for content slides (ex: '4x3')
});
$("a[rel^='prettyPhoto']").prettyPhoto({
default_width:640,
default_height:500,
theme:'light_square'
});
});
</script>
そのコードを複製せずにこれを行うより良い方法はありますか? 自分の「initializeSlide」イベントを定義する必要がありますか、それとも私が見逃している答えがありますか?