11

元の問題は解決しましたが、もっとエレガントな解決策があるかどうか疑問に思っています。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」イベントを定義する必要がありますか、それとも私が見逃している答えがありますか?

4

4 に答える 4

3

Orbit スライダーはあまり多くのメソッドを公開していません。幸いなことに、いくつかの簡単な回避策があります。

たとえば、次のように設定できます。

$(window).load(function () {
    var sliderChanged = (function sliderChanged(prevActive, active) {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            default_width: 640,
            default_height: 500,
            theme: 'light_square'
        });
        return sliderChanged;
    }());
    jQuery('#featured').orbit({
        afterSlideChange: sliderChanged,
        fluid: true
    });
});
于 2013-05-24T12:26:17.777 に答える
1

ここでは、jquery から load イベントを使用できると思います

 <script type="text/javascript">
  $(window).load(function () {
      $('#featured').orbit({fluid:true});
      $("a[rel^='prettyPhoto']").load(function(){
        $(this).prettyPhoto({
          default_width:640,
          default_height:500,
          theme:'light_square'
        });
      });
  });
 </script>
于 2013-05-29T19:46:45.137 に答える
0

After Slide Changeを使用しています

Orbitのドキュメントを参照してください

'afterSlideChange function(){}, //Empty Function for you to use after slide change'

したがって、この呼び出しは関数を空にし、何度も呼び出す必要があります..

さて、私の質問は、なぜあなたがこれを行っているのか、特定の理由はありますか? そうでない場合は、それを削除してください。

そして、私の認識によると、上記のRohitの答えが残りを行います...

これでうまくいくことを願っています:)

于 2013-05-31T09:32:04.450 に答える