0

レスポンシブデザインは初めてです。プロジェクトにFoundationオービットスライダーを使用しようとしています。写真のキャプションを表示できません。私は次のコードを持っています...

<div class="row">
    <div class="twelve columns">
    <div id="slider">
    <a href="#"><img src="images/pic1.jpg" /></a>
    <a href="#"><img src="images/pic2.jpg" /></a>
    <a href="#"><img src="images/pic3.jpg" /></a>
  </div>
</div>

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

これを初めて試したときはうまくいきませんでした。Stackoverflowを調べて、commanderdemonによる修正を試しました。それでもうまくいきませんでした。写真のキャプションにダークストリップを付けてもらえません。

Foundation.cssで、クラスorbit-captionの表示がnoneに設定されていることがわかります 

/* Captions ---------------------- */
.orbit-caption { display:none; font-family: inherit; }

.orbit-wrapper .orbit-caption { background: black; background: rgba(0, 0, 0, 0.6);  
    z-index: 30; color: white; text-align: center; padding: 7px 0; font-size: 13px;
    position: absolute; right: 0; bottom: 0; width: 100%; }

それを削除することで、写真に小さな黒い帯（高さ約10px）が表示され、3つのキャプションがすべて追加され、写真から削除されました。

写真の高さは400px未満にする必要がありますか？これに必要なCSS修正はありますか？
私は何が間違っているのですか？

アンカータグの代わりに画像タグだけを使ってみました。どちらも同じ結果になります。

PSダウンロードに付属しているfoundation.cssを使用しています。スクリーンショットを投稿することも許可されていません...

申し訳ありませんが間違いを見つけました...私はdata-caption="＃captionOne" -Jodyを置くことになっていた

4

2 に答える 2

0

あなたのjsでは'captions'は'true'に設定されていますか？

<script type="text/javascript">
   $(window).load(function() {
       $("#featured").orbit({
           captions : true
       });
   });
</script>
于 2013-01-24T16:17:06.047 に答える
0

イメージ タグに SPAN キャプション タグと同じ ID を指定します

于 2013-04-03T20:10:24.893 に答える