Orbit Version 1.2 Release

wrote this on in . Share this Post

Yes...it's finally here. Orbit's new release is all the new hotness. Get your hands on our lightweight, sexy jQuery image/content slider plugin. New main features include:

  • Content compatibility: Orbit can use content now instead of just images
  • No more overflow:hidden: Now the captions, directional nav, timer and bullet navigation can all live outside the Orbit slider
  • New loading: Updated code to make your initial load look awesome
  • Thumbnail bullet navigation: Meaning you can use thumbnails for your bullet navigation now
  • And much more like: Animated captions, restructured markup and js for speed and semantic goodness, a new base UI and styles, mouseover pause, better timer interactions, a callback for when images change...

Get in there and check it out now!

Checkout Orbit 1.2 on the ZURB Playground
Swing and a Miss
You're Design Thinking Too Much
Design pot
Design or Get Off the Pot

It has 47 comments.

Andy Gongea (ZURB) says

I can definitely see it in portfolio, product and company sites. Great work and also 2 thumbs up for its size (4KB - pure awesomeness)


Dave (ZURB) says

@Andy - Thanks dude! We tried to keep the footprint light, but make the plugin as functional and awesome as possible.


Nikunj Aggarwal (ZURB) says

@Dave - I am trying to put the slider on the center of the page but not able to do so. Please can You tell how to do that with Orbit Image Slider?

Ansen (ZURB) says

Hi, I'm looking for some help.

I'm trying to implement the Orbit Image Slider on a website, but cannot get the bullet navigation to work. When I declare 'bullets: true,' the bullets do not appear, and the slider breaks, repeating the first image over and over when the timer counts down.

This also happens with some other parameters, like when I try to use 'directionalNav'. However, others such as 'animation' and 'advanceSpeed' seem to work just fine...

What am I doing wrong?

Dave (ZURB) says

@Ansen - Not sure what's happening there. Post the exact parameters you are using and we can test it to make sure there is not some type of disagreement in the JS.

Pawel Poturalski (ZURB) says

Hi, great work!

'Orbit' works nice and smooth but i have no idea how create link to specific image. How can I call function shift() from other function on my website?

Thanks for your effort ;)

m (ZURB) says

hi and thanks for this. :)

one question though: what exactly does “thumbnails” mean? a small representation of the actual slide? or just custum bullet-navigation graphics?

i need the former.


how do i get it to work? all the documentation now says is something like: you can have it.

best m

Ryan (ZURB) says

Hi there, great slider! Works perfectly for normal images!

However, when trying to include an image as part of a content div, Orbit automatically displays that content image as a new slide. Please tell me there is any easy fix for this since including images in the content is crucial to what I'm attempting!


Ross Chapman (ZURB) says

Agree with Ryan above - how?

Ross Chapman (ZURB) says


One bad way round it is to put a p tag in and put a background image on the p tag. Eek I know, but it displays correctly!

Ryan (ZURB) says


Thanks for sharing... definitely not the most ideal solution! Don't know if that would even work the way I'm calling in the images.

Was really hoping to stick with Orbit for a content slider, but may need to switch to an alternative solution.

Dave (ZURB) says

@Ryan + Ross: Hey guys, thanks for the heads up about the issue in Orbit. A fix has already been pushed and if you download the new package on our playground, it will work fine with an image within a content block.

In the future, it would be awesome if any bugs were reported on the Orbit Git repo since that's how we are tracking issues now.

Ryan (ZURB) says

Thanks for the quick fix, unfortunately all it seemed to do was break my previously working Orbit setup. Just what files were updated?

Is there an option to post on GitHub w/out making an account? I did see the support issue there about this same issue, but there was no response.

Ryan (ZURB) says

Seems like each slide needs to be in a div now, even if it's just an image? Also, images don't see to be loading period after the update, alone or in content...

Dave (ZURB) says

Hey Ryan -

We accidentally deployed with a JS logger in the code - has been fixed right now :)


Ryan (ZURB) says

Just came back to say that it was actually the display:none on img for the loading option that was giving me issues! It's working fine now that I rectified that... but you say there was another issue as well? Hmmm, guess I'll just download and reinstall to make sure everything is up to par!

Thanks again for your quick action on this... looking forward to using Orbit now that I know it will satisfy all my needs!

Dave (ZURB) says

@Ryan - Glad we could help and hopefully the new version is everything you wanted and more :) A new version with even more improvements and refinement may be on the horizon soon :)

Ryan (ZURB) says

Looking forward to them! May I suggest the ability to turn off the timer but still have the slides auto advance. Or am I missing that setting?

Thanks again.

Reecoomn (ZURB) says

How can link images?

Reecoomn (ZURB) says


In the 1.1 revision of Orbit:

(9/4/2010): Added bullet navigation, linkable images, full HTML captions, a loading animation and greater

Where? No documentation. No information anywhere on how to add a link to an image. Why?


g (ZURB) says

Hi, this looks awesome and simple! Does Orbit support loading HTML content? Imagemaps?


Dave (ZURB) says

@Reecoomm - This has been patched and fixed. For any future issues the easiest way to get those resolved quickly is through the Github issues page for Orbit

@g - Yes, Orbit supports content and we've even seen it be used for AJAX'd content too. Sorry, there is not explicit support for Imagemaps, but we can't see why it couldn't be used for it :)

Brandon (ZURB) says

Hey guys, I have a small issue. I attempted to install your awesome slider into my Magento site. Unfortunately it doesn't work in Chrome or Safari. I'm sure its something small that I'm doing wrong, just not sure what it could be. Thanks!

here is the site

Dave (ZURB) says

Hey Brandon -

I think the issue with your site (after taking a very quick look at the code) is that you are calling the plugin on $(document).ready instead of $(window).load.

Try that on for size and let us know if that works out.


Brandon (ZURB) says

Thanks for the quick response Dave!

Good news is it looks better, bad news, still doesn't load images.


Now it doesn't work in firefox or IE. Thanks for the assistance! I'll comb it over again and see If I can figure it out.

Brandon (ZURB) says

Hey Dave, I've made a little progress since earlier today.

I still can't see anything in Chrome or Safari, although when I remove the { display: none; } I can see the images in Chrome and Safari, they just don't transition to the next image. Any ideas?

ScottO (ZURB) says

Unless I missed it, there isn't a way to call the navigation functions from one's own elements.

I added this to jquery.orbit-1.2.3.js (orbit.jquery.js in the Foundation download), after the if statement in // ! DIRECTIONAL NAV

                $('#leftbtn2').click(function() {
                $('#rightbtn2').click(function() {

And assigned those id tags to my control elements.

DanF (ZURB) says

I am unable to get the navigation to work as well. I am assigning swipe events to it as well so that on an ipad/android tablet I may swipe left and right and those events trigger the left and right keyboard buttons... but how do you get the keyboard events to work? When I press the right or left arrow nothing happens...

Any help on this would be EXTREMELY helpful!!! Thanks guts for creating a killer Image Slider!!!

daniel dugarte (ZURB) says

** I don't see my post in here so i'm posting it again... **

This is a great slider!!!! thanks a million!

But i have a question... how do i validate that data-caption attribute on strict xhtml ? www.danieldugarte.me

any help is appreciated!

Daniel (ZURB) says

Hey Brandon

I had the same problem with Magento. That was my solution:
  1. Upload the Orbit files to your server;
  2. Create a custom variable in Magento that loads all the JS code and CSS;

<script src="js/orbit/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/orbit/jquery.orbit-1.2.3.js" type="text/javascript"></script>

<link rel="stylesheet" href="skin/frontend/default/YOURTHEME/css/orbit-1.2.3.css">

<!--[if IE]>
<style type="text/css">
   .timer { display: none !important; }
   div.caption { background:transparent;
        zoom: 1; }

<script type="text/javascript">
  jQuery(window).load(function() {

  1. Insert the custom variable on the page where you want the Orbit;
  2. Insert your "<div id="featured">" after the custom variable.

    The steps 2,3 and 4 I did using the Magento Admin.

    Take a look: http://loja.projectlab.com.br/

    I hope it was useful

Brian (ZURB) says

Hi This is a great slider! How ever can I ask one question? Is it possible to insert quicktime movie file format (mov, m4v) instead of image files? I mean I wanna put one movie file between images, like image1 - image 2 - movie file - image 3

Thanks for checking!

Nic (ZURB) says

Is it possible to display more than one slide at a time? I have a total of 6 slides, and want 3 to be visible at any time, and then it would 'slide' through these.

Alex (ZURB) says

It is possible, using CSS, to create rounded corners on the image area?

Andrew (ZURB) says

Hello! This is great! I was wondering if it is possible to have a rollover on the bullets and maybe a thumbnail will show? Can someone help?

Josh (ZURB) says

Is there a way to use numbers (1, 2, 3, 4, etc.) instead of bullets?

Colin (ZURB) says

This plug is excellent, the only problem i've come across so far is trying to implement Thumbnails instead of the bulleted list, I have followed the instructions on the zurb page but it doesn't seem to work and I don't think i'm the only one who's had this problem, can you help?

Colin (ZURB) says

Ah, nevermind, figured it out.

You HAVE to use their version of jquery, mine was older and didn't contain the right functions for data-thumb.

Michael (ZURB) says

Nice work Dave. Very nice implementation.

One thing I can't seem to do is to use content on any slide except the first one. It would be nide to see you add content to a secondary slide in your demo so we can see how it's done properly.


PS. Not member of GitHub.

Derek (ZURB) says

What he said ^^

How do I add content to more than just the first slide? It seems to add everything in content class to the parent "featured" slide. Any examples on this?


Michael (ZURB) says

Added text to graphics to get around text limitation. Unfortunately, it doesn't work on IE7 (6.25% market share) so we have to replace it with something else.

Eduardo (ZURB) says

Very good slider, but...

how do i validate the data-caption attribute on strict xhtml ?

Thank you very much

roberto (ZURB) says

Avoid a nasty "RightLeft" display from IE8 below slider print("code sample");div.slider-nav {display:none} print("code sample");

Matthew (ZURB) says

Love the slider! Found one issue and have one request:

In order for an image to be a link AND have a caption, you have to put the 'data-caption="id"' in the tag, not the tag. I had a whole bunch of trouble figuring that out.

Request: I'd love it if I could make the captions show/hide on rollover, instead of always being there.

Matthew (ZURB) says

oops, didn't realize that these comments allowed html. I should have said "you have to put the 'data-caption="id" in the anchor tag, not the image tag."

Christine (ZURB) says

With regards to Brian's question above - has anyone been able to add a movie to one of the slides so that the slider shows image-image-movie-image? I can get the movie to show, but it always plays over the top of the first images until you scroll to it.

McBloody (ZURB) says

Hi there,

First off, thanks for the great plugin :)

I've been looking and i havn't found how to put the arrows on the outside as the slide says it can (probably my fault).

If anyone can point me to the right direction, i would most appreciate this!


Andrew (ZURB) says

@Matthew - thanks for the link tip. Moving the data-caption and data-thumb from the image tag to the parent link I added helped get things back on track.