javascript - 轨道 slider : Captions Not Displaying

Question

我正在尝试将 Foundation 3 幻灯片 Orbit 实现到我的 Foundation 移动响应设计中。当我尝试在幻灯片上放置字幕时，没有显示，但字幕栏显示。这是基于包含的主页模板，因此 slider 组件的 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”中将第 394 行移动到第 391 行之前设法解决了这个问题。问题是当前版本的 orbit 在 解析 .orbit-caption 中的文本之前从 data-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))

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