jQuery Image SlideShow

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

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></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.

<img src=”overflow.jpg” alt=”Overflow: Hidden No More” />

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.

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

And there you have it. Orbit, implemented and ready to rock with all the default settings.