Note: Works best in Chrome, Safari, FF3.5+ (but is tested for IE7+, FF3.5+, Chrome and Safari)

Most jQuery image sliders hover at around 8 kbs for minified versions, and around 15kbs or more for uncompressed development files, but what if there was a way to keep the simple fades, slides, and a couple other nifty bits, but strip the bloated and corny diagonal-cross fades or spiral dissolves.  But wait! 

Orbit is a killer jQuery plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.

The Code

So to get started you're going to need jQuery and the Orbit plugin (make sure jQuery is attached first).

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

Now we can quickly hookup the CSS we need:

<link rel="stylesheet" href="css/orbit.css">

And finally, let's dig into the markup.

<div id="featured"> 
     <img src="link.jpg" alt="Link" />
     <a href="www.zurb.com/playground"><img src="ezio.jpg" alt="Ezio" /></a>
     <img src="masterchief.jpg" alt="Master Chief" />
     <img src="marcusfenix.jpg"  alt="Marcus Fenix" />
</div> 

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. Finally, you'll notice the second image (ezio.jpg) is wrapped in an anchor - as of Orbit version 1.1 you can link entire images!

Let's check out the script to activate the Orbit plugin.

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

The Sugar Coating (Version 1.1 Features)

Now, of course you want some other cool features like HTML captions, the brand new bullet navigation and the slick new loading state. Let's give you the low-down on how to get these going.

Full HTML Captions

Orbit now has full HTML captions so you can add styles, links, lists, or whatever your coding heart desires.

1. 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.
2. Add the span ID you chose to the "rel" attribute on the corresponding image tag.

Check it out:

<div id="featured"> 
     <img src="link.jpg" alt="Link" rel="linkCaption" />
     <a href="www.zurb.com/playground"><img src="ezio.jpg" alt="Ezio" /></a>
     <img src="masterchief.jpg" alt="Master Chief" rel="chiefCaption" />
     <img src="marcusfenix.jpg"  alt="Marcus Fenix" />
</div> 

<span class="orbit-caption" id="linkCaption">Link gallantly riding the majestic Epona across the hyrulian plains.</span>

<span class="orbit-caption" id="chiefCaption">Master Chief surveying <a href="www.zurb.com">Reach</a>, home of the lastest Halo game.</span>

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).

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit({
              bullets: true
         });
     });
</script>

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):

#featured { width: 940px; height: 450px; background: #009cff url('/playground/jquery-image-slider-plugin/orbit/loading.gif') no-repeat center center; overflow: hidden; }

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.

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.

<!--[if IE]>
     <style type="text/css">
         .timer { display: none !important; }
         div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
    </style>
<![endif]-->

SHAZAAM. jQuery Plugin Magic.

You're done. You now have the ultimate image slider! The markup is clean, the CSS is kept to a minimum so you can style it any way you like and the jQuery is quick and simple. 

Now that we have the basics hooked up, let's check out the options the come packaged with Orbit.

$('#featured').orbit({          
     animation: 'fade', //fade, horizontal-slide, vertical-slide
     animationSpeed: 800, //how fast animations are
     advanceSpeed: 4000, //if timer advance is enabled, time between transitions 
     startClockOnMouseOut: true, //if timer should restart on MouseOut
     startClockOnMouseOutAfter: 3000, //how long after mouseout timer should start again
     directionalNav: true, //manual advancing directional navs
     captions: true, //if has a title, will be placed at bottom
     captionAnimationSpeed: 800, //how quickly to animate in caption on load and between captioned and uncaptioned photos
     timer: false //if the circular timer is wanted
     bullets: false //true or false to activate the bullet navigation
});

The Future of Orbit?

What's next for this awesome slider? Version 1.1 brought a lot of new and cool features, but here's what on the horizon for Orbit:

• Content slider action (not just images)
• Removing the "overflow: hidden" of the slider so bullet and directional nav can go outside the slider
• A couple more simple animations