Foundation

Orbit

Orbit is an easy to use, powerful image slider built to be responsive, just like Foundation.

First, ensure you're including the Orbit JS and CSS. If you're using the SCSS version of Foundation, these will be part of your environment already, and if you download Foundation as simple CSS the two files will be part of foundation.js and foundation.css, respectively. Also ensure you're including jQuery, also provided as part of any Foundation distribution. If you are using the Scss version, make sure that you uncomment relative asset = true in your config.rb file.


Setting Up Your Slider

  • Your Orbit slider is simply a div with a unique ID. For our examples we'll use <div id="featured">, an example of which you can see above. The markup looks like this:

    Activating Orbit

    With your #featured element in place, we just need to call Orbit. Remember: your call to Orbit needs to come after you've included jQuery and foundation.js. By default, those are at the end of your document, so this code snippet should come at the very end. That's all you need to trigger Orbit on a series of images. It includes the timer element, and the left and right hand paddles.

  • 
    <div id="featured">
      <img src="../images/orbit-demo/demo1.jpg" />
      <img src="../images/orbit-demo/demo2.jpg" />
      <img src="../images/orbit-demo/demo3.jpg" />
    </div>
    
    
    <script type="text/javascript">
       $(window).load(function() {
           $("#featured").orbit();
       });
    </script>
    

Options

Orbit has a number of options available, which you can specify when you call .orbit(). In the example above, we kept all of the default values, but you can optionally use any of these options:

  • Name Options Description
    animation fade
    horizontal-slide
    vertical-slide
    horizontal-push
    The animation used for transitions
    animationSpeed 800 How fast animations happen
    timer true
    false
    Do you want a timer or not?
    resetTimerOnClick true
    false
    Reset timer or pause on click
    advanceSpeed 4000 If timer is enables, time between transitions
    pauseOnHover true
    false
    Do you want hover to pause slider?
    startClockOnMouseOut true
    false
    If clock should start on MouseOut
    startClockOnMouseOutAfter 1000 How long after MouseOut should timer start again?
    directionalNav true
    false
    Do you want directional nav?
    captions true
    false
    Do you want captions?
    captionAnimation fade
    slideOpen
    none
    Animation style for caption entrance
    captionAnimationSpeed 800 How quickly should captions animate?
    bullets true
    false
    Do you want bullet navigation?
    bulletThumbs true
    false
    Do you want thumbnails bullets?
    bulletThumbLocation '' Location of where thumbs will be from Orbit file
    afterSlideChange function(){}, Empty Function for you to use after slide change
    fluid true
    false
    Aspect Ratio
    Control responsiveness of Orbit slides
  • 
    $('#featured').orbit({
      animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
      animationSpeed: 800,                // how fast animtions are
      timer: true,                        // true or false to have the timer
      resetTimerOnClick: false,           // true resets the timer instead of pausing slideshow progress
      advanceSpeed: 4000,                 // if timer is enabled, time between transitions
      pauseOnHover: false,                // if you hover pauses the slider
      startClockOnMouseOut: false,        // if clock should start on MouseOut
      startClockOnMouseOutAfter: 1000,    // how long after MouseOut should the timer start again
      directionalNav: true,               // manual advancing directional navs
      captions: true,                     // do you want captions?
      captionAnimation: 'fade',           // fade, slideOpen, none
      captionAnimationSpeed: 800,         // if so how quickly should they animate in
      bullets: false,                     // true or false to activate the bullet navigation
      bulletThumbs: false,                // thumbnails for the bullets
      bulletThumbLocation: '',            // location from this file where thumbs will be
      afterSlideChange: function(){},     // empty function
      fluid: true                         // or set a aspect ratio for content slides (ex: '4x3')
    });
    

Content Sliders

While Orbit was created as a simple image slider, it also supports div elements with arbitrary content. You could have a slider of text blocks, actions, or really anything.

Remember: for a content slider to work without any images, you need to specify an aspect ratio when you call .orbit(). As shown in the options above, the option needed is fluid: 16x9 or another ratio.

Note: We put some simple styles on our content slider, notably a background and padding on the div elements. Orbit stacks your slides, so transparent slides will will be visible on top of each other.

  • This is a content slider.

    Each slide holds arbitrary content, like text or actions.

    We can include text and buttons, like this!

    We take no responsibility for what happens if you click this button.

    Rock My World!

    What? You didn't click it?

    We'll give you the benefit of the doubt. Maybe you did, and now you're back!

  • 
    <div id="featuredContent">
      <div>
        <h4>This is a content slider.</h4>
        <p>Each slide holds arbitrary content, like text or actions.</p>
      </div>
      <div>
        <h4>We can include text and buttons, like this!</h4>
        <p>We take no responsibility for what happens if you click this button.</p>
        <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
      </div>
      <div>
        <h4>What? You did not click it?</h4>
        <p>We give you the benefit of the doubt. Maybe you did, and now you are back!</p>
      </div>
    </div>
    
    
    <script type='text/javascript'>
       $(window).load(function() {
           $('#featuredContent').orbit({ fluid: '16x6' });
       });
    </script>
    

Custom Bullets

By setting bulletThumbs to true and a path for bulletThumbLocation, orbit will pull in custom bullets for the slider and apply them to a generated ul.orbit-bullets element which you can customize with CSS.


<ul class="orbit-bullets">
  <li class="has-thumb active" style="background-image: url(/path/to/bullets/bullet-one.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">1</li>
  <li class="has-thumb" style="background-image: url(/path/to/bullets/bullet-two.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">2</li>
  <li class="has-thumb" style="background-image: url(/path/to/bullets/bullet-three.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">3</li>
</ul>

Each li in the list is associated with an index of a slide in your slider. The filenames for the images are specified on the slider element itself with a data-thumb attribute.


<div id="featuredBullets">
  <img src="slide-1.jpg" data-thumb="bullet-one.jpg" />
  <img src="slide-2.jpg" data-thumb="bullet-two.jpg" />
  <img src="slide-3.jpg" data-thumb="bullet-three.jpg" />
</div>

Adding Captions

Another awesome feature in Orbit is the ability to add captions for each slide. The process is simple, just add data-caption="#captionId" to the content div or img. Then, below your div id="featured", add span class="orbit-caption" id="captionId" that will hold your caption content. You can add as many as slides you have available, just make sure the data-caption and the id of the span are the same and that you add # to the data-caption like in the code below.


<div id="featuredContent">
  <div data-caption="#captionOne">
    <h4>This is a content slider.</h4>
    <p>Each slide holds arbitrary content, like text or actions.</p>
  </div>
  <div data-caption="#captionTwo">
    <h4>We can include text and buttons, like this!</h4>
    <p>We take no responsibility for what happens if you click this button.</p>
    <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
  </div>
  <div data-caption="#captionThree">
    <h4>What? You did not click it?</h4>
    <p>We gave you the benefit of the doubt. Maybe you did, and now you are back!</p>
  </div>
</div>

<span class="orbit-caption" id="captionOne">Here is a caption...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>


Directional Navigation on Hover

Want to have your Orbit navigation appear on hover? We've got you covered! It isn't part of the JS options or anything like that, just simple CSS. Below is the Scss/CSS needed for the effect.


/* Scss */
.orbit-wrapper {
  .slider-nav span { @include opacity(0); @include single-transition(opacity, 400ms); }
  &:hover .slider-nav span { @include opacity(1); }
}

/* CSS */
.orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }
.orbit-wrapper:hover .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }

Graceful Orbit Loading State

Since Orbit executes through Javascript, before it kicks in you might see your images or content all stacked on top of each other. To avoid this you can make use of a property of Orbit: it adds a class of .orbit once it executes, meaning you can target your div#featured with specific styles that will be overriden when the class is added.

For example, if we want Orbit to load a simple light grey screen with a spinner, the CSS would look like this:


#featured { background: url(spinner.gif) center center #f4f4f4 no-repeat; height: 300px; }
#featured img { display: none; }

#featured.orbit { background: none; }
#featured.orbit img { display: block; }

We hide the images by default, and give the #featured block a fixed height and background with a spinner. Once Orbit loads the images are displayed and we remove that background.


Reveal Your Magic

Our handy jQuery modal plugin makes it really easy to let content stay off the page until you need it.
Learn about Reveal »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs