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 并尝试了 commanddemon 给出的修复。仍然没有用。我什至没有得到图片上的暗条标题。

在foundation.css中，我看到轨道标题类的显示设置为无 

/* 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%; }

通过删除它，我能够在图片上看到一个黑色的小条（大约 10 像素高），并且 3 个标题都被附加并从图片中掉出来。

图片的高度是否应小于 400 像素？这需要css修复吗？
我究竟做错了什么？

我试过只使用图像标签而不是锚标签。两者都有相同的结果。

PS我正在使用foundation.css，因为它附带下载。我也不允许发布屏幕截图...

抱歉发现了错误......我应该把 data-caption="#captionOne" -Jody

4

2 回答 2

0

在图像标签中提供与 SPAN 标题标签相同的 ID

于 2013-04-03T20:10:24.893 回答
0

在你的 js 中，'captions' 设置为 'true' 吗？

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