Can the Zurb plugin “twentytwenty” be run in a Foundation 4 Reveal Modal?

1
votes

Is it possible to run a Zurb TwentyTwenty (before and after slider view) plugin inside a Foundation Reveal Modal? I can get the modal to fire and the Header is shown, but not the plugin. The plugin does work on the page in a standard column and I even tried commenting it out to see if that was it. Here is the code I set for the modal:

<!-- Modal Box -->
<div id="myModal2" class="reveal-modal">
    <h3><font color="red">See the difference we can make</h3></font></hr>
    <div class="twentytwenty-container">
      <img src="img/rjh_before.jpg" />
      <img src="img/rjh_after.jpg" />
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>
<!-- Modal Box end -->

And here is the trigger link:

<a href="#" data-reveal-id="myModal2">Modal Version of the 20/20 slider</a>

This is the first project I have done with Foundation and though I am learning fast, this one has me stumped. Any help would be greatly appreciated!

1
javascriptjquerycssmodal-dialogzurb-foundation

1 Answers

2
votes

I found the answer myself; it's a bug in Reveal. Found on GitHub here:

Squashed picture when using Orbit in a Reveal - Issue #2809

Added this code before the script for reveal:

var resize_window = function(e) {
$(window).trigger('resize');
}

$(document).foundation('reveal', {'opened' : resize_window});
<!-- Not used in my case, but additionally for running Orbit -->
$(document).foundation('orbit')

Works a treat!