2

使用带有 Orbit 滑块的 Zurb Foundation 5 来构建我的网站。我在模式中设置了一个滑块，但它只显示图像的顶部和幻灯片导航，直到我检查元素，然后整个滑块显示出来。帮助？

网站在这里： http ://www.parker-gibson.com/testing/foundation/index.html 当您单击“这就是我所做的”部分中的第一个图像时，会显示有问题的滑块。提前致谢！相关代码如下...

<div id="mqm" class="reveal-modal" data-reveal>
  <div class="row">
     <div class="large-4 large-push-8 columns">
        <h3>This is a test</h3>
        <div class="project-description">
        <p>This is a test. Lorem ipsum dolor sit amet...</p>
        </div>
     </div>
     <div class="large-8 large-pull-4 columns">
        <ul data-orbit>
        <li><img src="http://placesheen.com/725/400" alt="sheen1"></li>
        <li><img src="http://placesheen.com/725/400" alt="sheen2"></li>
        <li><img src="http://placesheen.com/725/400" alt="sheen3"></li>
        </ul>
     </div>
        <a class="close-reveal-modal" href="#">x</a>
  </div>
</div>
4

2 回答 2

2

这个脚本解决了这个问题......

<script>
$(document).on('opened', '[data-reveal]', function () {
var modal = $(this);
$(window).trigger('resize');
});
</script>
于 2014-04-26T23:27:24.733 回答
1

当 Orbit 最初不可见时，我只看到 Orbit 的高度问题（由于父容器隐藏它、动态添加等。

实际上它不工作，因为你检查元素，当你检查元素浏览器的调整大小事件被触发

调整浏览器的大小（甚至调整 Web 控制台）会导致轨道插件添加正确的高度属性并使一切正常运行。

要解决此问题，请手动触发浏览器调整大小事件

$(document).foundation('orbit');
$(window).resize();
于 2014-03-30T11:26:29.907 回答