Orbit: A Slick jQuery Image Slider Plugin
Sick of confusing and bloated image sliders that never work?
Rock ZURB's Orbit for a mere 4KB
Note: Works best in Chrome, Safari, FF3.5+ (but is tested for IE7+, FF3.5+, Chrome and Safari)
Orbit has moved to Foundation!
Greetings! We here at ZURB love Orbit so much, that we have included it in our (Awesome) rapid prototyping framework Foundation. We will no longer release updates, or provide support for this version. Thanks for understanding!
Check out Foundation 4 →
The Code
So to get started you're going to need jQuery and the Orbit plugin (make sure jQuery is attached first).
Now we can quickly hookup the CSS we need:
And finally, let's dig into the markup.
Now, just a couple notes before moving on...
- First, Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure all your images are the same size or the larger images will peek out on the sides.
- Secondly, you'll notice that the "id" of the parent div is "featured", but it doesn't have to be. When you call the Orbit plugin, you set your own selector and the magical "orbit" class gets applied.
All we need to do now is activate the Orbit plugin.
And there you have it. Orbit, implemented and ready to rock with all the default settings. If you want to see more options or to clean up your slider, checkout the "Advanced Options" tab above.
Still Want This Version?
This version of Orbit has been deprecated. If you're a developer, check out Foundation, our rapid prototyping front-end framework.
Go to Foundation →Version History
1.3.0 (1/25/2012): Add custom events to allow control via custom JavaScript. Fixed intermittent loading issue on Chrome. Fixed IE issues. Refactored code to be more readable. Final version outside Foundation.
1.2.3 (3/17/2011): Fixed a number of issues including:
- Fixed issue of false parameters failing
- Can now have just 1 slide without it failing
- Reorganized kit download to isolate "demo" pieces and core code
- Included jQuery 1.5.1
- We've edited some of the docs here around "Content" slides
1.2.1 (2/3/2011): Changed caption styles to not break on different sized sliders and added documentation in here about positioning other than relative. Also fixed zip download for Windows.
1.2 (1/20/2011): Content compatible, new loading animation, thumbnail navigation for bullets, animated captions, no more overflow hidden on the container, restructured the markup & js, changed the base UI, added callback, mouseover pause, better timer interactions and re-browser tested.
1.1 (9/4/2010): Added bullet navigation, linkable images, full HTML captions, a loading animation and greater browser compatibility.
1.0 (Release): Initial design and code including timer, directional nav, fade and slide animations and general awesomeness
Neato Options
Now, of course you want some other cool features like HTML captions, bullet navigation (now with thumbnails as well), or using content instead of images. Let's give you the low-down on how to get these going.
All Plugin Parameters
Here are all the plugin parameters with their defaults just listed. The options are commented out to the right. Go nuts.
Full HTML Captions
Orbit now has full HTML captions so you can add styles, links, lists, or whatever your coding heart desires.
- Add a span with the class "orbit-caption" and an ID of your very own choosing after the slider div. Put whatever HTML you'd like to appear in the caption inside. They're block level, so anything goes.
- Add the span ID you chose to the "data-caption" attribute on the corresponding image tag.
Check it out:
Want to Animate Those Captions? Just change the captionAnimation parameter (fade, slideOpen, none).
Bullet Navigation
The glorious new bullet navigation is as easy as passing a parameter when you call the Orbit function. The bullet nav is natively an unordered list of increasing numbers, but for the example and the kit we've replaced them with nice, little round bullets (but changing this is a just a matter of changing the CSS how you like).
You Want Thumbnails of Your Images?
Orbit can now pull thumbnails for your bullet navigation! First you need to create your thumbnail, save it somewhere in your file directory. Below is the HTML/JS/CSS to make it work:
Using Content
Orbit is now content compatible! It can be mixed in with images, but just make sure your content is in a "div" tag and has a background of some type (otherwise images behind it become visible). To make sure your content looks nice, be sure to give it a background (so other images in Orbit dont bleed behind it). Just drop it right into the markup like so:
Using Only Content? Orbit relies on image sizes to get it's dimensions, but just get into the Orbit CSS and find the ".orbit div" declaration and set it to the exact pixel width and height you want!
Download Orbit
This version of Orbit has been deprecated, if you are a developer, check out our Rapid Prototyping Framework Foundation. It is loaded with awesome tools like our buddy Orbit,our awesome modal Reveal, and many, many more! Start here build everywhere.
Visit FoundationVersion History
1.3.0 (1/25/2012): Add custom events to allow control via custom JavaScript. Fixed intermittent loading issue on Chrome. Fixed IE issues. Refactored code to be more readable. Final version outside Foundation.
1.2.3 (3/17/2011): Fixed a number of issues including:
- Fixed issue of false parameters failing
- Can now have just 1 slide without it failing
- Reorganized kit download to isolate "demo" pieces and core code
- Included jQuery 1.5.1
- We've edited some of the docs here around "Content" slides
1.2.1 (2/3/2011): Changed caption styles to not break on different sized sliders and added documentation in here about positioning other than relative. Also fixed zip download for Windows.
1.2 (1/20/2011): Content compatible, new loading animation, thumbnail navigation for bullets, animated captions, no more overflow hidden on the container, restructured the markup & js, changed the base UI, added callback, mouseover pause, better timer interactions and re-browser tested.
1.1 (9/4/2010): Added bullet navigation, linkable images, full HTML captions, a loading animation and greater browser compatibility.
1.0 (Release): Initial design and code including timer, directional nav, fade and slide animations and general awesomeness
Making Orbit Shine
Orbit looks fantastic out of the box (so to speak), but really getting the polish requires a couple more pieces of love, especially getting a hot load before images pop in and fixing for some less fortunate browsers (IE).
Glorious, Seamless Loading State
For those who are in pursuit of the ultimate polish, we've made it easy to create a simple loading state for your slider. Anywhere in your CSS, just add the following declaration (just replace "featured" with your slider's ID, and use your own images' appropriate widths and heights):
Note: We need to apply the CSS to your unique slider ID because the plugin won't know the ID until after it loads. Adding this CSS will prevent seeing a flash of unstyled content before the plugin finishes loading. These styles are in the demo CSS in the kit.
Non-Relative Positioning
The way Orbit works is that your container actually gets wrapped by another container (for several reasons), but what this means is that if you are positioning your slider "absolute" or want to center it with "margin: 0 auto" and you apply those to your slider ID (#featured in this example) it won't work. The best way to solve that is to put all positioning pieces on your ID and "div.orbit-wrapper".
Note: You can also just position the parent container of the Orbit slider if it has one ;)
Fixing IE (Blerg!)
As we all know, IE is not a designer or developer's best friend, but we're going to try to make it easy on you. Orbit as of version 1.1 works in IE7+, but since CSS3 transforms or RGBA aren't available, we have to perform some magic to fix the timer and caption default background. The easiest way to fix these issues is to hide the timer and to use Microsoft's proprietary alpha solution. Use the following conditional declaration in the header of your document.
Download Orbit
This version of Orbit has been deprecated, if you are a developer, check out our Rapid Prototyping Framework Foundation. It is loaded with awesome tools like our buddy Orbit,our awesome modal Reveal, and many, many more! Start here build everywhere.
Visit FoundationNow On GitHub
We have put Orbit on GitHub to make handling code maintenance and issue tracking easier. Please log issues through GitHub henceforth :)
Check out other Playground experiments
Reactive Animation Listener
Foundation for Apps
Slinky
Tribute.js
