Menu icon Foundation
Viewport/fullscreen orbit

Hello,

I am having trouble getting the orbit slider to be fullscreen. What i want is that orbit adapts to the screen (viewport) right now i got it to be fullwidth. But as you can see: www.mitmedia.nl the height is too high as i do not want the frontpage to have a scrollbar. It should scale and keep the images ratio.

Is there anyone more experienced than i am who can help me with this?

OrbitFullscreenslider

Hello,

I am having trouble getting the orbit slider to be fullscreen. What i want is that orbit adapts to the screen (viewport) right now i got it to be fullwidth. But as you can see: www.mitmedia.nl the height is too high as i do not want the frontpage to have a scrollbar. It should scale and keep the images ratio.

Is there anyone more experienced than i am who can help me with this?

Rafi Benkual over 3 years ago

Wholly crap that image is huge! ;)

Perhaps a smaller one would load faster.

You'll have better results with a background image. You'll just need to make the image background-size: cover; and using vh units is best.

Example: http://codepen.io/rafibomb/pen/YwBObW?editors=1100

Mitchell van 't Zelfde over 3 years ago

Sorry i removed the pictures yesterday, so thats why nothing was loading.

I have fixed the problem using this method because nothing i tried would keep the image ratio intact or it would receive in the image being so large you would need to scroll.

This is the method i used:

http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/

I ofcourse removed the transitions.

I have the pictures back online, take a look and let me know what you think.

Will try your codepen after work and see it that works as well.

Mitchell van 't Zelfde over 3 years ago

Couldnt wait and tried ur codepen. It works. Only how would i go on about implementing that with Wordpress?

Right now i use orbit like this:

<div class="row fullwidth hide-for-small-only">
      <div class="large-12 columns no-pad">
        <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="true" data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
        <ul class="orbit-container">
          <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
          <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
<?php

          // The Query

          $args = array(
            'post_type'=>'orbit',
            'orderby' => 'title',
            'order' => 'ASC',
            'posts_per_page' => 8
          );

          $the_query = new WP_Query( $args );

          // The Loop
          if($the_query->have_posts()) :
                while($the_query->have_posts()) :
                $the_query->the_post();

          /* Restore original Post Data 
           * NB: Because we are using new WP_Query we aren't stomping on the 
           * original $wp_query and it does not need to be reset.

          wp_reset_postdata(); */
          ?>

          <li class="is-active orbit-slide">
            <div class="image-wrap" id="wrapper">
        <?php echo get_the_post_thumbnail(); ?>
        <?php endwhile; else: ?> 
        <?php endif; ?>'
</li>
</div>        
        </ul>
      </div>

       </div>
    </div>

How would i add Background images via wordpress?