轨道滑块：不显示字幕

Question

我正在尝试在我的 Foundation 移动响应式设计中实现 Foundation 3 幻灯片Orbit。当我尝试在幻灯片上放置标题时，没有显示，但标题栏会显示。这是基于包含的主页模板，因此滑块组件的 CSS 并未与所提供的内容有所不同，但包含了一个覆盖 CSS 文件，但不会影响任何内容。 （style.css）我尝试了两种方法，都不管用。 You can see the issue here。感谢您给我的任何帮助，我是响应式设计的新手。

      <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>

Answer 1

我也遇到了这个问题。我设法通过在“jquery.foundation.orbit.js”中的第 391 行之前移动第 394 行来解决这个问题。问题是当前版本的轨道从数据标题的值中删除了#，在它解析.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()

把这两个部分倒过来变成这样：

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

我没有测试过这是否会破坏其他任何东西，但它确实解决了您遇到的字幕问题。

Answer 2

该框架显然具有预定义的类和 ID，因此您必须使用它，如果您使用其他未定义的，它将无法工作。你的代码几乎没问题，但是无论你使用"slide1"、"slide2"、"slide3"，你都应该使用"#captionOne"、"#captionTwo"、"#captionThree"。

来自网站：http://foundation.zurb.com/docs/orbit.php

添加字幕

Orbit 的另一个很棒的功能是可以为每张幻灯片添加标题。过程很简单，只需在内容div或img中添加data-caption="#captionId"即可。然后，在您的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>

如果您遵循我写的内容，它应该可以工作。希望对您有所帮助。