Question

我正在尝试将 Foundation 3 幻灯片 Orbit 实施到我的Foundation移动响应式设计中。当我尝试在幻灯片上放置标题时，没有显示标题栏。这是基于包含的主页模板，因此滑块组件的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

我刚刚遇到这个问题。我设法通过在＆＃34; jquery.foundation.orbit.js＆＃34;中的第391行之前移动第394行来解决此问题。问题是当前版本的轨道会在解析#范围内的文本之前从数据标题的值中删除.orbit-caption。

所以我没有看到您的代码示例有任何问题。你只需要修复＆＃34; jquery.foundation.orbit.js＆＃34;你自己，或者等待修复它的下一个版本。

当前版本：

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

如果您正在使用＆＃34; foundation.min.js，＆＃34;你想要编辑第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中另一个很棒的功能是能够为每张幻灯片添加字幕。该过程很简单，只需将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>

如果你按照我写的那样去做就行了。希望它有所帮助。

轨道滑块：字幕不显示

2 个答案: