Menu icon Foundation

Designer | Grand Rapids, Michigan

My Posts

No Content

My Comments

Luke Robinson commented on Chris's post over 3 years

Hi Chris,
Only two years late; but I have a solution to your problem. I'm using Foundation 5.5.3 and LazyYT v0.1.5.
Cheers,Luke
<!-- JQUERY and FOUNDATION JAVASCRIPT -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="/global/foundation/js/foundation.min.js"></script>
<script src="/global/foundation/js/app.js"></script>

<!-- Lazyload YouTube Videos -->
<script src="/global/js/jquery/lazyYT/lazyYT.js" type="text/javascript" defer="defer"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.js-lazyYT').lazyYT();
});
</script>

<!-- Stop videos from playing after the modal closes -->
<script>
// Modal window
// When the modal's "X" button is clicked...
$('.close-reveal-modal').click(function() {
// ...have Foundation close the modal.
$('.reveal-modal').foundation('close');
// To prevent the video from playing, remove the YouTube iframe from the DOM...
$('div.flex-video').remove('iframe');
// ...and reinitialize the LazyYT plugin...
$('.js-lazyYT').lazyYT();
// ...and remove the '.lazyYT-video-loaded' class in the Web page so the video can be replayed.
$('.js-lazyYT').removeClass('lazyYT-video-loaded');
});

// Modal background overlay
// When the modal's background is clicked...
$(document).on('click', '.reveal-modal-bg', function() {
// ...have Foundation close the modal.
$('.reveal-modal').foundation('close');
// To prevent the video from playing, remove the YouTube iframe from the DOM...
$('div.flex-video').remove('iframe');
// ...and reinitialize the LazyYT plugin and...
$('.js-lazyYT').lazyYT();
// ...remove the '.lazyYT-video-loaded' class in the Web page so the video can be replayed.
$('.js-lazyYT').removeClass('lazyYT-video-loaded');
});
</script>
 

Luke Robinson commented on Glenn Philp's post over 3 years

Thanks Glenn! I'm very happy to have stumbled upon this thread (via Twitter).

Luke Robinson commented on Glenn Philp's post over 3 years

Hey Glenn & Jean-Luc,
Thanks for the suggestion and the link to the FS6 documentation. I hope ZURB will consider adding an AJAX modal example alongside their Advanced options. Meanwhile, anyone have basic AJAX demo or CodePen?
In my situations involving AJAX modals in Foundation 5.3, I've been loading only a section of content (usually a DIV) from another Web page into a modal window. jQuery's load function makes loading a DIV (via a URL) very simple; whereas Foundation 5's AJAX modal assumes the whole document behind the URL is to be loaded.
Cheers!

Luke Robinson commented on Glenn Philp's post over 3 years

Hello Glenn and Rafi,
I implemented a similar solution in Foundation 5.3.3 utilizing the basic Reveal without data-reveal-ajax. The trick was calling Reveal with jQuery's load function. You can see it in action under the heading '10 Year Priorities' in Calvin's Master Plan: http://www.calvin.edu/master-plan/#ten-year
The jQuery snippet (below) is close to Glenn's example; however, my solution has not worked in Foundation 6.x. YMMV.
<!--
MASTER PLAN - Foundation modal windows loaded via jQuery AJAX
/master-plan/priorities-modals.html
/master-plan/profiles-modals.html
-->
<script>
$(document).ready(function(){
$('.js-modal-link').click(function(){
var url = $(this).attr("href");
var id = $(this).attr("id");
$("#modalWindow").load(url+" #"+id).foundation('reveal', 'open');
});
});
</script>

Posts Followed




Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Chris's post over 3 years

Hi Chris,
Only two years late; but I have a solution to your problem. I'm using Foundation 5.5.3 and LazyYT v0.1.5.
Cheers,Luke
<!-- JQUERY and FOUNDATION JAVASCRIPT -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="/global/foundation/js/foundation.min.js"></script>
<script src="/global/foundation/js/app.js"></script>

<!-- Lazyload YouTube Videos -->
<script src="/global/js/jquery/lazyYT/lazyYT.js" type="text/javascript" defer="defer"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.js-lazyYT').lazyYT();
});
</script>

<!-- Stop videos from playing after the modal closes -->
<script>
// Modal window
// When the modal's "X" button is clicked...
$('.close-reveal-modal').click(function() {
// ...have Foundation close the modal.
$('.reveal-modal').foundation('close');
// To prevent the video from playing, remove the YouTube iframe from the DOM...
$('div.flex-video').remove('iframe');
// ...and reinitialize the LazyYT plugin...
$('.js-lazyYT').lazyYT();
// ...and remove the '.lazyYT-video-loaded' class in the Web page so the video can be replayed.
$('.js-lazyYT').removeClass('lazyYT-video-loaded');
});

// Modal background overlay
// When the modal's background is clicked...
$(document).on('click', '.reveal-modal-bg', function() {
// ...have Foundation close the modal.
$('.reveal-modal').foundation('close');
// To prevent the video from playing, remove the YouTube iframe from the DOM...
$('div.flex-video').remove('iframe');
// ...and reinitialize the LazyYT plugin and...
$('.js-lazyYT').lazyYT();
// ...remove the '.lazyYT-video-loaded' class in the Web page so the video can be replayed.
$('.js-lazyYT').removeClass('lazyYT-video-loaded');
});
</script>
 

You commented on Glenn Philp's post over 3 years

Thanks Glenn! I'm very happy to have stumbled upon this thread (via Twitter).

You commented on Glenn Philp's post over 3 years

Hey Glenn & Jean-Luc,
Thanks for the suggestion and the link to the FS6 documentation. I hope ZURB will consider adding an AJAX modal example alongside their Advanced options. Meanwhile, anyone have basic AJAX demo or CodePen?
In my situations involving AJAX modals in Foundation 5.3, I've been loading only a section of content (usually a DIV) from another Web page into a modal window. jQuery's load function makes loading a DIV (via a URL) very simple; whereas Foundation 5's AJAX modal assumes the whole document behind the URL is to be loaded.
Cheers!

You commented on Glenn Philp's post over 3 years

Hello Glenn and Rafi,
I implemented a similar solution in Foundation 5.3.3 utilizing the basic Reveal without data-reveal-ajax. The trick was calling Reveal with jQuery's load function. You can see it in action under the heading '10 Year Priorities' in Calvin's Master Plan: http://www.calvin.edu/master-plan/#ten-year
The jQuery snippet (below) is close to Glenn's example; however, my solution has not worked in Foundation 6.x. YMMV.
<!--
MASTER PLAN - Foundation modal windows loaded via jQuery AJAX
/master-plan/priorities-modals.html
/master-plan/profiles-modals.html
-->
<script>
$(document).ready(function(){
$('.js-modal-link').click(function(){
var url = $(this).attr("href");
var id = $(this).attr("id");
$("#modalWindow").load(url+" #"+id).foundation('reveal', 'open');
});
});
</script>

Posts Followed

Following

  • No Content

Followers

  • No Content