Product Design Lessons

Intro to Foundation  |   Lesson #19

Changing Orbit’s default slide

Hack Foundation’s Orbit plugin to change the default slide.

A brief warning

Any changes you make to Orbit now will be deleted if you upgrade to a newer version in the future. We usually discourage editing the plugins like Orbit to make upgrades easier. Nevertheless these edits can be useful and, once you know what’s changing, easy to replicate.

Show a different slide on load

By default, Orbit shows users the contents of its first list item when the page first appears. First HTML on first load. Makes sense. But it could show another.

1. Add default_slide: 0 to “settings” in foundation.orbit.js

2. Tell Orbit to use that setting. This involves appending ._goto(slide_id) to the new Orbit declaration near the end of the file.

Replace:
new Orbit($el, $.extend({},self.settings, opts));

With:
new Orbit($el, $.extend({},self.settings, opts))._goto(slide_id);

Change the first slide users see by URL

Sometimes we want to show different content based on which page the user just came from. For example, we may want users visiting a product detail page for the first time to see a hero image of the product — but users coming from a different inside page should see a slide with more detailed content.

You can tell Orbit to change its initial slide — the content that users see first — based on a hash in the browsers’ URL. For example, yoursite.com/#1 would display a different slide than yoursite.com/#2.

1. Add initial_slide: window.location.hash.substr(1) to settings in foundation.orbit.js.

2. Add this code before the new Orbit line:

if ( self.settings.initial_slide && self.settings.initial_slide > 0 ) {
var slide_id = self.settings.initial_slide;
}
else {
var slide_id = self.settings.default_slide;
}

3. Finally, change the new Orbit line to: new Orbit($el, $.extend({},self.settings, opts))._goto(slide_id);

Your turn

Although people have asked for this feature before, we have a good reason for not building this into Orbit: It only works if the hash addresses an existing slide. For example, yoursite.com/#2 — which refers to the third slide in Orbit — will only work on an Orbiter with at least three slides. Send #99 to Orbit with three slides will fling your site into the outer reaches of space … or just fail to work.

So we’re calling on you, our readers, to puzzle over the problem. Share your ideas in the Foundation forum.


About the instructor

Ben

Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.