Menu icon Foundation
Orbit inside of Reveal Modal

HI Im' new in Foundation and i have troubles to get working Orbit inside a Reveal modal.
it opens but i can't see the images.

What im doing worng?

Can Someone give me an example please

Thank you

	<a class="button tiny radius success " href="#" data-reveal-id="Fotos" >Fotos</a>

	<!--   *****************************************************************   -->						
            

     <div id="Fotos" class="reveal-modal large" data-reveal>
    	
		<ul data-orbit>
    		  <li>
    			<img src="images/eli/elimax01.jpg" alt="slide 1" />
    		  </li>
    		  <li>
    			<img src="images/eli/elimax02.jpg" alt="slide 2" />
    		  </li>
    		  <li>
    			<img src="images/eli/elimax03.jpg" alt="slide 3" />
    		  </li>
		</ul>			
			
		<a class="close-reveal-modal">&#215;</a>
        
   </div> 
   
   <!--   *****************************************************************   -->    
   
   
    <script src="../bower_components/jquery/jquery.js"></script>
    <script src="../bower_components/foundation/js/foundation.min.js"></script>
    <script src="../js/app.js"></script>
	
    <script>
      $(document).foundation();
    </script>
	
  </body>
</html>

Modal

Orbitreveal

HI Im' new in Foundation and i have troubles to get working Orbit inside a Reveal modal.
it opens but i can't see the images.

What im doing worng?

Can Someone give me an example please

Thank you

	<a class="button tiny radius success " href="#" data-reveal-id="Fotos" >Fotos</a>

	<!--   *****************************************************************   -->						
            

     <div id="Fotos" class="reveal-modal large" data-reveal>
    	
		<ul data-orbit>
    		  <li>
    			<img src="images/eli/elimax01.jpg" alt="slide 1" />
    		  </li>
    		  <li>
    			<img src="images/eli/elimax02.jpg" alt="slide 2" />
    		  </li>
    		  <li>
    			<img src="images/eli/elimax03.jpg" alt="slide 3" />
    		  </li>
		</ul>			
			
		<a class="close-reveal-modal">&#215;</a>
        
   </div> 
   
   <!--   *****************************************************************   -->    
   
   
    <script src="../bower_components/jquery/jquery.js"></script>
    <script src="../bower_components/foundation/js/foundation.min.js"></script>
    <script src="../js/app.js"></script>
	
    <script>
      $(document).foundation();
    </script>
	
  </body>
</html>

Modal

This post has been closed. No new replies can be added.

Fredric Tillberg almost 6 years ago

In your CSS file, specify a minimum height for the class "orbit-container".

.orbit-container {
    min-height: 375px;
}

Tweak to suit your needs, in regards to height of the element, default Background color (Should an image not load) or whatever you want really.

EDIT 1:
You can also wrap your <ul data-orbit> in a div tag and set your desired height there, the orbit slider should inherit it's height from there.

EDIT 2:

Rafi Benkual wrote:
@Fredric is right, the first css is the solution:
http://cdpn.io/mjfEn

Thanks for the Codepen, Rafi.

Rafi Benkual almost 6 years ago

@Fredric is right, the first css is the solution:
http://cdpn.io/mjfEn

Eduardo almost 6 years ago

Thanks for you two.

Fredric for the solution and Rafi for the example

Parker Gibson almost 6 years ago

While this solution "works" it is not ideal for responsive design. Giving a min-height of say 375px is fine for desktop, but then on mobile it leaves a large white space under slider. One would need a media query and another min-height for tablet and mobile. Is there no other way?

Rafi Benkual almost 6 years ago

Here is JS workaround for this http://cdpn.io/ielGv

Reflow should work so we will look into that.
// If you add new content after the page has been loaded, you will need to trigger a reflow by running one of the following:
$(document).foundation('orbit', 'reflow');

// OR for all Foundation components
$(document).foundation('reflow');```