Menu icon Foundation
Clearing lightbox not working properly inside Orbit

I am using a orbit slider and and wanted to open images which are showing in the Orbit slider content. so, I used clearing light-box inside the Orbit slider and now, problem is that it's class( .clearing-blackout ) not taking height so I can't see any image and also when i reset the height from percentage to pixels, then it shows but then the clearing light-box doesn't take full screen size but take the size of the orbit. This creating problem.

This is the code

<div class="row">
                        <div class="small-12 medium-12  large-12 small-centered medium-centered large-centered columns">
                            <ul id="event-media"  class="example-orbit"  data-orbit data-options="animation:slide;pause_on_hover:true;animation_speed:500;navigation_arrows:true;bullets:false;next_on_click:false;" style="margin-bottom:40px;">
                                    <li data-orbit-slide="headline-1">
                                       <div class="small-12 medium-12 large-12 columns " >
                                           <div class="media-box">
                                               <div class="small-12 medium-4 large-4 columns">
                                                   <img src="img/media/img.jpg"  alt="">
                                               </div>
                                               <div class="small-12 medium-8 large-8 columns">
                                                   <header>
                                                       <h4><strong>Event: </strong> ABC</h4>
                                                   </header>
                                                   <p><strong>Date: </strong>5-April-2013</p>
                                                   <p>may feel improvement in<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                                                     <div class="media_thums">

                                                         <ul class="clearing-thumbs small-block-grid-4" data-clearing>
                                                              <li><a href="img/media/image.jpg"><img data-caption="caption here..." src="img/media/thums/image.jpg"/></a></li>
                                                              <li><a href="img/media/image.jpg"><img data-caption="caption here..." src="img/media/thums/image.jpg"/></a></li>
                                                              <li><a href="img/media/image.jpg"><img data-caption="caption here..." src="img/media/thums/image.jpg"/></a></li>
                                                            </ul>

                                                     </div>
                                                   
                                               </div>
                                           </div>
                                        </div>
                                    </li>
                                   
                            </ul>
                        </div>
                    </div>

orbit sliderclearing lightbox

I am using a orbit slider and and wanted to open images which are showing in the Orbit slider content. so, I used clearing light-box inside the Orbit slider and now, problem is that it's class( .clearing-blackout ) not taking height so I can't see any image and also when i reset the height from percentage to pixels, then it shows but then the clearing light-box doesn't take full screen size but take the size of the orbit. This creating problem.

This is the code

<div class="row">
                        <div class="small-12 medium-12  large-12 small-centered medium-centered large-centered columns">
                            <ul id="event-media"  class="example-orbit"  data-orbit data-options="animation:slide;pause_on_hover:true;animation_speed:500;navigation_arrows:true;bullets:false;next_on_click:false;" style="margin-bottom:40px;">
                                    <li data-orbit-slide="headline-1">
                                       <div class="small-12 medium-12 large-12 columns " >
                                           <div class="media-box">
                                               <div class="small-12 medium-4 large-4 columns">
                                                   <img src="img/media/img.jpg"  alt="">
                                               </div>
                                               <div class="small-12 medium-8 large-8 columns">
                                                   <header>
                                                       <h4><strong>Event: </strong> ABC</h4>
                                                   </header>
                                                   <p><strong>Date: </strong>5-April-2013</p>
                                                   <p>may feel improvement in<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                                                     <div class="media_thums">

                                                         <ul class="clearing-thumbs small-block-grid-4" data-clearing>
                                                              <li><a href="img/media/image.jpg"><img data-caption="caption here..." src="img/media/thums/image.jpg"/></a></li>
                                                              <li><a href="img/media/image.jpg"><img data-caption="caption here..." src="img/media/thums/image.jpg"/></a></li>
                                                              <li><a href="img/media/image.jpg"><img data-caption="caption here..." src="img/media/thums/image.jpg"/></a></li>
                                                            </ul>

                                                     </div>
                                                   
                                               </div>
                                           </div>
                                        </div>
                                    </li>
                                   
                            </ul>
                        </div>
                    </div>