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 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.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.