Menu icon Foundation
Orbit inside Modal not working okay F6.3.0 (Javascript)

Hello,

I have been trying to embed an orbit within a modal, which is called from a java script function, using: 

$('#modal').html(htmlCode).foundation('open');

Given that the html code will be loaded inside the modal (see div below):

<div class="large reveal" id="modal" style="display: block;" data-reveal data-close-on-click="true" data-animation-in="zoom-in" data-animation-out="spin-out">

</div>

I am sending the code for the orbit in that variable.

Unfortunately, I am no able to see the orbit, only it's buttons:

 modal not showing orbit

If I add:

$(document).foundation();

Right after opening the modal, it looks like the orbiter starts moving, but the images are not shown; I can tell this from the highlight of the buttons and also when inspecting the page. 

I have tried to specify the height and display of different elements of the orbit, but nothing helps.

What could be happening here?

Thanks

6.3.0Orbitreveal modalmodalnot workingorbit inside modal

Hello,

I have been trying to embed an orbit within a modal, which is called from a java script function, using: 

$('#modal').html(htmlCode).foundation('open');

Given that the html code will be loaded inside the modal (see div below):

<div class="large reveal" id="modal" style="display: block;" data-reveal data-close-on-click="true" data-animation-in="zoom-in" data-animation-out="spin-out">

</div>

I am sending the code for the orbit in that variable.

Unfortunately, I am no able to see the orbit, only it's buttons:

 modal not showing orbit

If I add:

$(document).foundation();

Right after opening the modal, it looks like the orbiter starts moving, but the images are not shown; I can tell this from the highlight of the buttons and also when inspecting the page. 

I have tried to specify the height and display of different elements of the orbit, but nothing helps.

What could be happening here?

Thanks

Art Rin over 2 years ago

This is the content of var htmlCode:

var htmlCode =

'<div class="row">' +

'<div class="large-8 columns">' +

 

'<h1>Awesome. I Have It.</h1>' +

'<p class="lead">Your couch. It is mine.</p>' +

'<p>Im a cool paragraph that lives inside of an even cooler modal. Wins!</p>' +

'</div>' +

 

'<div class="large-4 columns">' +

'<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>' +

'<ul class="orbit-container">' +

'<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>' +

'<button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>' +

'<li class="is-active orbit-slide" style="display: block;">' +

'<img class="orbit-image" src="images/1/1.jpg" alt="Space">' +

'<figcaption class="orbit-caption">Space, the final frontier.</figcaption>' +

'</li>' +

'<li class="orbit-slide">' +

'<img class="orbit-image" src="images/1/2.jpg" alt="Space">' +

'<figcaption class="orbit-caption">Lets Rocket!</figcaption>' +

'</li>' +

'<li class="orbit-slide">' +

'<img class="orbit-image" src="images/2/1.jpg" alt="Space">' +

'<figcaption class="orbit-caption">Lets Rocket!</figcaption>' +

'</li>' +

'</ul>' +

'<nav class="orbit-bullets">' +

'<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>' +

'<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>' +

'<button data-slide="2"><span class="show-for-sr">Second slide details.</span></button>' +

'</nav>' +

'</div>' +

 

'</div>' +

'<button class="close-button" data-close aria-label="Close modal" type="button">' +

'<span aria-hidden="true">&times;</span>' +

'</button>' +

'</div>';