Menu icon Foundation
Foundation 6 Orbit within Modal Reveal Img Problem

Hello,

I am trying to include the orbit slider in a modal reveal, but the image is not quite responsive.
So at first the image doesn't even appear at all but then I found that I should use min-height: on .orbit-container but if for example I put min-height: 650px; because thats the height of my image, when I resize the browser the image will be responsive but it creates a gap below it.

The orbit itself is working though.

Any suggestions? :)

Untitled

Untitled1

Untitled2

<!-- JALUZELE VERTICALE Modal Starts Here -->
<div class="large reveal modal" id="modalJaluzeleVerticale" data-reveal>
  <h1>JALUZELE VERTICALE</h1>
  <div class="orbit" role="region" aria-label="Galerie Foto" 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">
        <img class="orbit-image" src="img/jaluzele_verticale.png" alt="Jaluzele Verticale">
      </li>
      <li class="orbit-slide">
        <img class="orbit-image" src="img/jaluzele_verticale_01.png" alt="Jaluzele Verticale">
      </li>
    </ul>
  </div>
  <p>Jaluzelele verticale sunt solutia ideala pentru umbrirea spatiilor sociale, cabinetelor si birourilor dar tot mai des isi gasesc utilitatea si in spatiile locuibile, ca si alternativa la perdele si draperii. Gama foarte variata de modele si culori permite diferite combinatii si posibilitati de a crea un interior original de o eleganta distinsa.</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<!-- End of Modal Here -->
            

         

Orbitfoundation 6imgheightcss

Hello,

I am trying to include the orbit slider in a modal reveal, but the image is not quite responsive.
So at first the image doesn't even appear at all but then I found that I should use min-height: on .orbit-container but if for example I put min-height: 650px; because thats the height of my image, when I resize the browser the image will be responsive but it creates a gap below it.

The orbit itself is working though.

Any suggestions? :)

Untitled

Untitled1

Untitled2

<!-- JALUZELE VERTICALE Modal Starts Here -->
<div class="large reveal modal" id="modalJaluzeleVerticale" data-reveal>
  <h1>JALUZELE VERTICALE</h1>
  <div class="orbit" role="region" aria-label="Galerie Foto" 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">
        <img class="orbit-image" src="img/jaluzele_verticale.png" alt="Jaluzele Verticale">
      </li>
      <li class="orbit-slide">
        <img class="orbit-image" src="img/jaluzele_verticale_01.png" alt="Jaluzele Verticale">
      </li>
    </ul>
  </div>
  <p>Jaluzelele verticale sunt solutia ideala pentru umbrirea spatiilor sociale, cabinetelor si birourilor dar tot mai des isi gasesc utilitatea si in spatiile locuibile, ca si alternativa la perdele si draperii. Gama foarte variata de modele si culori permite diferite combinatii si posibilitati de a crea un interior original de o eleganta distinsa.</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<!-- End of Modal Here -->
            

         
jt borger over 3 years ago

Have you solved this yet?

Vincent Morel over 3 years ago

I tried also to do this but even if working with min-height, I still have the problem that clicking on the prev or next arrow do not work...

I always gort "Uncaught TypeError: Cannot read property 'find' of undefined in foundation.util.keyboard.js"...

Seems he cannot find the slide because they are hidden...

Devra G about 3 years ago

Any progress on this? I have the same problem. 

Like Vincent Morel, sometimes the prev or next arrows work, but mostly not. This is in Chrome, Firefox, and IE.  They seem to work after the page has been refreshed. When they don't work, they usually start with the second slide in the sequence, not the first.

If the Orbit slider is working and I close the slide show on the second slide, when I re-open the window, the 3rd slide is showing and the next/prev arrows don't work.

I have multiple Reveal Modal windows on the page, each with its own Orbit slider. I've set a different min-height for each of the different .orbit-containers. So that at least makes the Reveal windows show up.

Safari will open the reveal window, but not show any slides. Inspecting the elements shows the outline of one slide off to the left of the reveal box.

I'd be grateful for any help. You can see this all happening on my test site, http://work.wordwizardsinc.com/test2.

Josh F over 2 years ago

Part of the answer seems to be forcing the resize JS. 

$(document).foundation();

$('.reveal-modal').on('opened', function(){
    $(window).trigger('resize');
});


//OR


$(document).foundation();

$(document).on('opened', '[data-reveal]', function () {
    $(window).trigger('resize');
});

See: http://stackoverflow.com/questions/21490016/foundation-5-orbit-slider-inside-reveal-modal-has-no-height

But the next / prev buttons still don't seem to be working right.