0

Foundation 3 を使用してサイトを構築し、付属の軌道スライダーを使用しています。問題は、私のサイトの設計では、スライダー ナビゲーションをスライドで許可されている場所とは別の場所に移動する必要があることです。

私のソースコードは次のとおりです。

<div id="slide-wrapper">
  <div class="orbit-wrapper" style="width: 1384px; height: 560px;"><div class="slider orbit" style="width: 1384px; height: 560px;">
      <img src="http://domain.com/uploads/sliders/psd1400x558.jpg" alt="slide image" data-caption="#captionId1" class="orbit-slide" style="opacity: 1; z-index: 3; display: block;">
      <img src="http://domain.com/uploads/sliders/banner1.jpg" alt="slide image" data-caption="#captionId2" class="orbit-slide" style="opacity: 0; display: block;">
  </div>
  <div class="slider-nav hide-for-small">
      <span class="right">Right</span>
      <span class="left">Left</span>
  </div>
</div><!--slider-->

<div class="blue-wrapper">
    <div class="left-blue"></div>
    <div class="right-blue"></div>
</div>


<span class="orbit-caption" id="captionId1">
   <h3>Title one</h3>
   <p>Text copy text copy text copy </p>
</span>

<span class="orbit-caption" id="captionId2">
   <h3>Title the Second</h3>
   <p>text copy text copy text copy</p>
</span>

div.slider-nav をそれぞれの span.orbit-caption 内に移動する必要がありますが、私が試したことが期待どおりに機能していません。

私の現在のjQueryは次のとおりです。

// Move home slider navigation from .slider to .orbit-caption
$(document).ready(function() {
     $('div.slider-nav').detach().appendTo('span.orbit-caption');
});

お知らせ下さい。

4

2 に答える 2

0

orbit.jssourceの関連ビットを見ると、次/前のスライドをトリガーするイベント ハンドラーは、デリゲートされたイベント on $slides_container(つまり、スライダー ラッパー要素) を使用してバインドされ、次/前の html クラス名によってこの要素にバブリングするイベントをフィルター処理します ( orbit-next/orbit-prevデフォルトで）。

これは、前/次のコントロールをスライダー ラッパーの外に移動すると、クリック イベントがラッパーにバブリングしなくなるため (それらはラッパーの子でなくなるため)、機能しなくなることを意味します。

最初のパス: hackety-hackety-hack

ハックな回避策は、新しい前/次のリンクを好きな場所に挿入し、新しいイベント ハンドラーをバインドして、元の次/前のコントロールのクリックをシミュレートすることです (必要がないため、非表示にすることができます)。

// not ideal, don't do this unless the second method listed below doesn't work
$(document).ready(function() {
    var $captions = $('orbit-caption'),
        $orbit = $('#id-of-your-orbit'),
        $sliderNav = $orbit.find('slider-nav'),
        $oldNextBtn = $sliderNav.find('.left'),
        $oldPrevBtn = $sliderNav.find('.right'),
        $newNextBtns = $captions.find('.your-next-class'),
        $newPrevBtns = $captions.find('.your-prev-class');

    $sliderNav.hide();//hide it but leave in DOM so we can trigger clicks on it's contents below

    $newNextBtns.on('click', function(){
        $oldNextBtn.trigger('click');
    });

    $newPrevBtns.on('click', function(){
        $oldPrevBtn.trigger('click');
    });
});

より良い方法: 既存のカスタム イベントに結び付ける

ただし、より適切な解決策は、コントロールがクリックされたときに、コンテナー要素で(文書化されていない AFAICS)orbit:next-slideまたはイベントをトリガーすることです。次のようにします。orbit:prev-slide

$(document).ready(function() {
    var $captions = $('orbit-caption'),
        $orbit = $('#slide-wrapper'),
        $nextBtns = $captions.find('.your-next-class'),
        $prevBtns = $captions.find('.your-prev-class');

    $orbit.find('slider-nav').remove();

    $nextBtns.on('click', function(){
        $orbit.trigger('orbit:next-slide');
    });

    $prevBtns.on('click', function(){
        $orbit.trigger('orbit:prev-slide');
    });
});

注：私はそれをテストしていませんが、ソースを見るとうまくいくようです。

于 2013-07-01T15:47:42.113 に答える