3

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

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

2 回答 2

6

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

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

于 2013-01-01T02:15:27.290 回答
0

该框架显然具有预定义的类和 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"将保存您的字幕内容。您可以添加尽可能多的可用幻灯片，只需确保 data-caption 和 span 的 id 相同，并且您将 # 添加到 data-caption 中，如下面的代码所示。

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

如果您遵循我写的内容，它应该可以工作。希望能帮助到你。

于 2012-12-27T19:42:47.527 回答