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):
<style type="text/css">
#featured {
width: 940px;
height: 450px;
background: #000 url('orbit/loading.gif') no-repeat center center; overflow: hidden; }
#featured img,
#featured div { display: none; }
</style>
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".
#featured, div.orbit-wrapper {
position: absolute;
top: 50px;
left: 50px;
}
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.
<!--[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]-->
code hosted by snipt.net