$('#featured').

orbit({ animation: 'fade', de, horizontal-push animationSpeed: 800, timer: true, advanceSpeed: 4000, ansitions pauseOnHover: false, startClockOnMouseOut: false, startClockOnMouseOutAfter: 1000, imer start again directionalNav: true, captions: true, captionAnimation: 'fade', captionAnimationSpeed: 800, e in bullets: false, navigation bulletThumbs: false, bulletThumbLocation: '', will be afterSlideChange: function(){} });

// fade, horizontal-slide, vertical-sli // how fast animtions are // true or false to have the timer // if timer is enabled, time between tr // if you hover pauses the slider // if clock should start on MouseOut // how long after MouseOut should the t // // // // manual advancing directional navs do you want captions? fade, slideOpen, none if so how quickly should they animat

// true or false to activate the bullet // thumbnails for the bullets // location from this file where thumbs // empty function

<div id="featured"> <img src="overflow.jpg" alt="Overflow: Hidden No More" /> <img src="captions.jpg" alt="HTML Captions" data-caption="#htmlCaption" /> <img src="features.jpg" alt="and more features" /> </div> <!-- Captions for Orbit --> <span class="orbit-caption" id="htmlCaption">I'm A Badass Caption</span>

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

<!-- THE MARKUP --> <div id="featured"> <img src="overflow.jpg" alt="Overflow: Hidden No More" /> <img src="captions.jpg" alt="HTML Captions" data-thumb="captions-thumb.jpg "/> <img src="features.jpg" alt="and more features" /> </div> // The JS <script type="text/javascript"> $(window).load(function() {

$('#featured').orbit({ 'bullets' : true, 'bulletThumbs': true, 'bulletThumbLocation': 'orbit/' }); }); </script> /* The CSS: Just provide a width and height for the thumb. All bullet navigation thumbs will have a class added "has-thumb" */ .orbit-bullets li.has-thumb { width: 100px; height: 75px; }