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>