轨道滑块：标题不显示

Question

我想实现的基金会3幻灯片轨道到我的基金会的移动响应式设计。当我尝试在幻灯片上放置字幕时，没有任何内容显示，但是标题栏却显示。这是基于包含的主页模板，所以滑块组件的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

明显的框架已预定义class和id，所以你必须使用，如果使用其他人没有定义，它不会工作。您的代码几乎可以，但是无论您使用何种方式，请使用"slide1"，"slide2","slide3"，您应该使用"#captionOne","#captionTwo","#captionThree"。

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

添加字幕

在轨道上运行的另一个真棒特点是添加标题为每张幻灯片的能力。该过程很简单，只需将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> 

如果你按照我写它应该工作。希望能帮助到你。

Answer 2

我刚刚也遇到了这个问题。我设法通过在“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))

我没有测试，看看是否还有什么突破，但它确实解决您遇到的标题问题。