ZURB Menu

Foundation

Orbit

Orbit is an easy to use, powerful image slider that's responsive, allowing you to swipe on a touch-enabled device.

  • Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  • Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  • Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Build Orbit With HTML

Building Orbit is pretty simple using our HTML classes and structure; you'll just need to write the markup, find some images or text, fire up the Javascript and you'll be ready to go. On touch-enabled devices, Orbit has swipe functionality that makes it easy to switch slides. On screens without touch interfaces, you'll see bullet and arrow navigation if you have the options setup in your JS. Here's markup structure for Orbit:

<ul data-orbit>
  <li>
    <img src="../img/demos/demo1.jpg" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="../img/demos/demo2.jpg" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="../img/demos/demo3.jpg" />
    <div class="orbit-caption">...</div>
  </li>
</ul>
We'll Automatically Add HTML

To keep your markup really clean, we've let JS add what's needed for the navigation, bullets and other parts of the plugin. Once the page has been loaded, your markup will look different. Below is an example of the markup so you know what to target.

<!-- Orbit Container -->
<div class="orbit-container">
  <ul data-orbit="" class="orbit-slides-container">
    <li>
      <img src="../img/demos/demo3.jpg">
      <div class="orbit-caption">...</div>
    </li>
    <li class="active">
      <img src="../img/demos/demo1.jpg">
      <div class="orbit-caption">...</div>
    </li>
    <li>
      <img src="../img/demos/demo2.jpg">
      <div class="orbit-caption">...</div>
    </li>
    <li>
      <img src="../img/demos/demo3.jpg">
      <div class="orbit-caption">...</div>
    </li>
    <li>
      <img src="../img/demos/demo1.jpg">
      <div class="orbit-caption">...</div>
    </li>
  </ul>

  <!-- Prev/Next Arrows -->
  <a href="#" class="orbit-prev">Prev <span></span></a>
  <a href="#" class="orbit-next">Next <span></span></a>

  <!-- Slide Numbers -->
  <div class="orbit-slide-number">
    <span>1</span> of <span>3</span>
  </div>

  <!-- Timer and Play/Pause Button -->
  <div class="orbit-timer">
    <span></span>
    <div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
  </div>
</div>

<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
  <li data-orbit-slide-number="1"></li>
  <li data-orbit-slide-number="2" class="active"></li>
  <li data-orbit-slide-number="3"></li>
</ol>

  • Headline 1

    Subheadline

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

  • Headline 2

    Subheadline

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

  • Headline 3

    Subheadline

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus


Deep Linking Support

You can now link to slides in Orbit. This is useful when constructing custom bullets or referencing a particular slide in a description. To see it in action click on one of the links below:

The markup is simple, each <li> should have a data-orbit-slide data attribute with a unique identifier for the slide. Then anywhere outside of your Orbit slider you can use data-orbit-link to reference that slide.

<ul data-orbit>
  <li data-orbit-slide="headline-1">
    <h2>Headline 1</h2>
    <h3>Subheadline</h3>
    <p>Pellentesque habitant morbi tristique senectus.</p>
  </li>
  <li data-orbit-slide="headline-2">
    <h2>Headline 2</h2>
    <h3>Subheadline</h3>
    <p>Pellentesque habitant morbi tristique senectus.</p>
  </li>
  <li data-orbit-slide="headline-3">
    <h2>Headline 3</h2>
    <h3>Subheadline</h3>
    <p>Pellentesque habitant morbi tristique senectus.</p>
  </li>
</ul>

<!-- Now link to the slides above -->
<ul class="disc">
  <li><a href="#" data-orbit-link="headline-1">Goto Slide 1</a></li>
  <li><a href="#" data-orbit-link="headline-2">Goto Slide 2</a></li>
  <li><a href="#" data-orbit-link="headline-3">Goto Slide 3</a></li>
</ul>

Graceful Loading & Preloader

We've cleaned up how Orbit initializes by adding a wrapper feature that stops the ugly flash of unstyled content. Here's the markup needed:

<div class="slideshow-wrapper">
  <ul id="featured2" data-orbit>
    <!-- Orbit slides -->
  </ul>
</div>

To add the preloader, simply include a div class="preloader" right inside the wrapper, like so:

<div class="slideshow-wrapper">
  <div class="preloader"></div>
  <ul data-orbit>
    <!-- Orbit slides -->
  </ul>
</div>

Available SCSS Variables

We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.

$include-html-orbit-classes: $include-html-classes;

/* We use these to control the caption styles */
$orbit-container-bg: #f5f5f5;
$orbit-caption-bg: rgba(0,0,0,0.6);
$orbit-caption-font-color: #fff;
$orbit-caption-font-size: emCalc(14);
$orbit-caption-position: "bottom";    // Supported values: "bottom", "under"
$orbit-caption-padding: emCalc(10,14);
$orbit-caption-height: auto;

/* We use these to control the left/right nav styles */
$orbit-nav-bg: rgba(0,0,0,0.6);
$orbit-nav-bg-hover: rgba(0,0,0,0.6);
$orbit-nav-arrow-color: #fff;
$orbit-nav-arrow-color-hover: #ccc;

/* We use these to control the timer styles */
$orbit-timer-bg: rgba(0,0,0,0.6);
$orbit-timer-show-progress-bar: true;

/* We use these to control the bullet nav styles */
$orbit-bullet-nav-color: #999;
$orbit-bullet-nav-color-active: #222;
$orbit-bullet-radius: emCalc(18);

/* We use these to controls the style of slide numbers */
$orbit-slide-number-bg: rgba(0,0,0,0);
$orbit-slide-number-font-color: #fff;
$orbit-slide-number-padding: em-calc(5px);

/* Graceful Loading Wrapper and preloader */
$wrapper-class: "slideshow-wrapper";
$preloader-class: "preloader";

Using the JavaScript

Before you can use Orbit you'll want to verify that both jQuery (or Zepto) and foundation.js are available on your page. You can refer to the javascript documentation on setting that up.

Just add foundation.orbit.js AFTER the foundation.js file. Your markup should look something like this:

<body>

  ...

  <script>
      document.write('<script src=/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');
    </script>

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();
  </script>

</body>
        

Required Foundation Library: foundation.orbit.js

Then, you'll need to add a data-orbit data attribute to make the JS work properly on that element. That looks like:

<ul data-orbit>
  ...
</ul>
Optional JavaScript Configuration

Orbit options can only be passed in during initialization at this time.

$(document).foundation('orbit', {
  animation: 'fade',
  timer_speed: 10000,
  pause_on_hover: true,
  resume_on_mouseout: false,
  animation_speed: 500,
  stack_on_small: true,
  navigation_arrows: true,
  slide_number: true,
  container_class: 'orbit-container',
  stack_on_small_class: 'orbit-stack-on-small',
  next_class: 'orbit-next',
  prev_class: 'orbit-prev',
  timer_container_class: 'orbit-timer',
  timer_paused_class: 'paused',
  timer_progress_class: 'orbit-progress',
  slides_container_class: 'orbit-slides-container',
  bullets_container_class: 'orbit-bullets',
  bullets_active_class: 'active',
  slide_number_class: 'orbit-slide-number',
  caption_class: 'orbit-caption',
  active_slide_class: 'active',
  orbit_transition_class: 'orbit-transitioning',
  bullets: true,
  timer: true,
  next_on_click: false,
  variable_height: false,
  before_slide_change: function(){},
  after_slide_change: function(){}
});

Starting in 4.0.7 you can also use the data-options attribute to pass configuration settings to Orbit. Treat it like a style property:

<ul data-orbit data-options="timer_speed:2500; bullets:false;">
  ...
</ul>

Events

You can bind to the following events in your code.

Event Params Description
orbit:ready event Fires when the slider has loaded
orbit:before-slide-change event Fires before a slide changes
orbit:after-slide-change event, orbit Fires after a slide transition animation has finished. The orbit parameter contains slide_number and total_slides.
orbit:timer-started event Fires each time the timer is started/resumed
orbit:timer-stopped event Fires each time the timer is paused/stopped
Example

Here's an example of how you can bind to these events:

<ul id="featured1" data-orbit>
  <li>
    <img src="../img/demos/demo1.jpg" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="../img/demos/demo2.jpg" />
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="../img/demos/demo3.jpg" />
    <div class="orbit-caption">...</div>
  </li>
</ul>

<script>
$("#featured1").on("orbit:ready", function(event) {
  console.info("ready");
});
$("#featured1").on("orbit:before-slide-change", function(event) {
  console.info("before slide change");
});
$("#featured1").on("orbit:after-slide-change", function(event, orbit) {
  console.info("after slide change");
  console.info("slide " + orbit.slide_number + " of " + orbit.total_slides);
});
$("#featured1").on("orbit:timer-started", function(event, orbit) {
  console.info("timer started");
});
$("#featured1").on("orbit:timer-stopped", function(event, orbit) {
  console.info("timer stopped");
});
</script>

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...

×

This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×

This modal has video

×