Orbit Slider in Zurb Foundation not working until I inspect element

Question

Using Zurb Foundation 5 with Orbit slider to build my site. I have a slider set up in a modal, but it only shows the top part of the image and the slide navigation until I inspect element, and then the whole slider shows up. Help?

Site is here: http://www.parker-gibson.com/testing/foundation/index.html The slider in question is revealed when you click the first image in the "This is what I do" section. Thanks in advance! Relevant code is below...

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

Answer 1

This script fixed the problem...

<script>
$(document).on('opened', '[data-reveal]', function () {
var modal = $(this);
$(window).trigger('resize');
});
</script>

Answer 2

I've only seen height problems with Orbit when Orbit was initially not visible (due to a parent container hiding it, added dynamically, etc.

Actually it is not working because of you inspect element,When you inspect element browser's resize event got fired

Resizing your browser (or even adjusting the web console) would cause the orbit plugin to add the correct height attribute and make everything work nice.

To solve this issue trigger browser resize event manually

$(document).foundation('orbit');
$(window).resize();