3

Foundation 3スライドショーOrbitを Foundation モバイル レスポンシブ デザインに実装しようとしています。スライドにキャプションを配置しようとすると、何も表示されませんが、キャプション バーは表示されます。これは含まれているホームページ テンプレートに基づいているため、スライダー コンポーネントの CSS は提供されたものから変更されていませんが、オーバーライド CSS ファイルが含まれていますが、何の影響もありません。(style.css) 2 つの方法を試しましたが、どちらも機能しません。ここで問題を確認できます。あなたが私に与えることができる助けをありがとう、私はレスポンシブデザインに不慣れです。

      <div id="slider">

<img data-caption="#slide1" src="http://placehold.it/1000x400&text=[img 1]" />
<img data-caption="#slide2" src="http://placehold.it/1000x400&text=[img 2]" />
<img data-caption="#slide3" src="http://placehold.it/1000x400&text=[img 3]" />

      </div>

<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>

    </div>

私も試しました：

      <div id="slider">

<div data-caption="#slide1"> <img src="http://placehold.it/1000x400&text=[img 1]" /></div>
<div data-caption="#slide2"><img src="http://placehold.it/1000x400&text=[img 2]" /></div>
<div data-caption="#slide3"><img src="http://placehold.it/1000x400&text=[img 3]" /></div>

      </div>

<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>

    </div>

私の開始JS：

  <script type="text/javascript">
   $(window).load(function() {
       $('#slider').orbit({
             bullets: false,
             timer: true,
             captions: true,
             animation: 'fade' });
   });
</script>
4

2 に答える 2

6

私もこの問題に遭遇しました。「jquery.foundation.orbit.js」の 391 行目の前に 394 行目を移動することで、この問題を修正することができました。問題は、スパン内のテキストを解析する前に、現在のバージョンのオービット#が data-caption の値から を削除することです。.orbit-caption

したがって、コード例に問題はありません。「jquery.foundation.orbit.js」を自分で修正するか、それを修正する次のリリースを待つ必要があります。

現行版：

390. // if location selector starts with '#', remove it so we don't see id="#selector"
391. if (captionLocation.charAt(0) == '#') {
392.     captionLocation = captionLocation.substring(1, captionLocation.length);
393. }
394. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity

修正版:

390. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
391. // if location selector starts with '#', remove it so we don't see id="#selector"
392. if (captionLocation.charAt(0) == '#') {
393.     captionLocation = captionLocation.substring(1, captionLocation.length);
394. }

「foundation.min.js」を使用している場合は、46 行目を編集します。これを探します。

t.charAt(0)=="#"&&(t=t.substring(1,t.length)),n=e(t).html()

2 つの部分を逆にして、次のようにします。

n=e(t).html(),t.charAt(0)=="#"&&(t=t.substring(1,t.length))

これにより他の問題が発生するかどうかはテストしていませんが、発生したキャプションの問題は修正されます。

于 2013-01-01T02:15:27.290 に答える
0

フレームワークには明らかに事前定義されたクラスとIDがあるため、それを使用する必要があります。定義されていない他のクラスとIDを使用すると、機能しません。コードはほぼ問題ありませんが、、、を使用する場合は常に、、を使用する"slide1"必要"slide2"が"slide3"あり"#captionOne"ます。"#captionTwo""#captionThree"

ウェブサイトから：http：//foundation.zurb.com/docs/orbit.php

キャプションの追加

Orbitのもう1つの優れた機能は、各スライドにキャプションを追加する機能です。プロセスは単純でdata-caption="#captionId"、コンテンツdivまたはに追加するだけimgです。次に、の下に、キャプションコンテンツを保持するものをdiv id="featured"追加します。span class="orbit-caption" id="captionId"使用可能なスライドをいくつでも追加できます。データキャプションとスパンのIDが同じであることと、以下のコードのようにデータキャプションに＃を追加することを確認してください。

<div id="featuredContent">
<div data-caption="#captionOne">
<h4>This is a content slider.</h4>
<p>Each slide holds arbitrary content, like text or actions.</p>
</div>
<div data-caption="#captionTwo">
<h4>We can include text and buttons, like this!</h4>
<p>We take no responsibility for what happens if you click this button.</p>
<p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button"   target="_blank">Rock My World!</a></p>
</div>
<div data-caption="#captionThree">
<h4>What? You did not click it?</h4>
<p>We gave you the benefit of the doubt. Maybe you did, and now you are back!</p>
</div>
</div>

<span class="orbit-caption" id="captionOne">Here is a caption...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>

あなたが私が書いたものに従うならば、それはうまくいくはずです。それが役に立てば幸い。

于 2012-12-27T19:42:47.527 に答える