Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows

Advertisement

A visitor comes to your website all giddy to learn more about your product, when suddenly a snazzy slideshow loads with some snap. Impressed, they go to register and are greeted by a most elegant modal window. At this point they are finally overjoyed by the velociraptor that suddenly charges across their screen. They don’t know why but they like it.

Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Standing out is hard. To the rescue come frameworks such as jQuery, which offer a modular, highly customizable experience for your visitors.

Today, we are thrilled to introduce two new jQuery plug-ins that were developed exclusively for Smashing Magazine readers to liven up your developer tool belts: Orbit, a new slider; and Reveal, a modal plug-in.

Why Create Our Own?

Quickly, before diving into the details, some background would be helpful. There are hundreds of jQuery image and content sliders and probably thousands of modal plug-ins. So, why create our own? We wrote these for a number of reasons, the most important ones being:

  • Flexibility
    We use these plug-ins for clients, internal projects, our apps and a number of other places. We can easily tweak and re-use the code for specific and special implementations.
  • Experience
    There is no better way to learn how to create better plug-ins and code than to do it yourself and release it publicly. Orbit has undergone a number of iterations and rewrites, which we learned from. Reveal has undergone only a few. We got Raptorize right the first time and haven’t had to update it.
  • Better interactions and development
    Perhaps the biggest driver was that, across our team, we used a number of plug-ins that have different quirks and features, but none of them nailed the features and interactions that we wanted. Developing plug-ins allowed us to work from a uniform codebase, iterate and optimize our work.

Have a look at a couple of our previous articles:

Orbit: jQuery Image Slider

First up is our new jQuery slider, Orbit. At a mere 4 KB, Orbit can handle images, linked images and straight-up content blocks. Setting it up takes just a few minutes, and it has some styles out of the box. We started working on Orbit because of all the many jQuery image sliders, none seemed straightforward to implement or had nice default styles. After several iterations and releases, the addition and removal of a number of features and some serious learning, we had a plug-in that perfectly fit our needs.

Let’s dive into the code, shall we?

screenshot3

The Code

To get started, you’ll need jQuery4 and the Orbit plug-in5 (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 hook up the CSS that we need:

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

Finally, let’s dig into the mark-up.

<div id="featured">
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" />
   <img src="features.jpg" alt="and more features" />
</div>

Just a couple of notes before moving on:

  1. Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure that all of your images are the same size or else the larger ones will peek out at the sides.
  2. You’ll notice that the id of the parent div is featured, but it doesn’t have to be. When you call the Orbit plug-in, you can set your own selector, and then the magical orbit class will be applied.

All we need to do now is activate the Orbit plug-in.

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

There you have it: Orbit, implemented and ready to be used with all of the default settings. To see more options, clean up the slider and do more advanced customization, please continue reading.

Neato Options

Of course, you’ll want some other features like HTML captions, bullet navigation (with thumbnails), and using content instead of images. Here’s the low-down on how to get these going.

Here are all of the plug-in parameters and their default states. The options are commented out to the right. Go nuts!

$('#featured').orbit({
  animation: 'fade',               // fade, horizontal-slide, vertical-slide, horizontal-push
  animationSpeed: 800,             // how fast animations are
  timer: true,                     // true or false to have the timer
  advanceSpeed: 4000,              // if timer is enabled, time between transitions
  pauseOnHover: false,             // if you hover pauses the slider
  startClockOnMouseOut: false,     // if clock should start on MouseOut
  startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
  directionalNav: true,            // manual advancing directional navs
  captions: true,                  // do you want captions?
  captionAnimation: 'fade',        // fade, slideOpen, none
  captionAnimationSpeed: 800,      // if so how quickly should they animate in
  bullets: false,                  // true or false to activate the bullet navigation
  bulletThumbs: false,             // thumbnails for the bullets
  bulletThumbLocation: '',         // location from this file where thumbs will be
  afterSlideChange: function(){}   // empty function
});

Full HTML Captions

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

  1. Add a span with the class orbit-caption and an ID of your 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 data-caption attribute of the corresponding image tag.

Check it out:

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

Want to animate those captions? Just change the captionAnimation parameter (fade, slideOpen, none).

Bullet Navigation

Getting a new bullet navigation is as easy as passing a parameter when you call the Orbit function. The bullet navigation is natively an unordered list, but in the example and in the kit we’ve replaced them with nice little round bullets. (Changing this is a just a matter of changing the CSS to whatever you’d like.)

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

Orbit can now pull thumbnails for your bullet navigation! First, create your thumbnail and save it somewhere in your file directory. Below is the HTML, CSS and JavaScript to make it work:

<!-- 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; }

Using Text

Orbit is text-compatible, too. It can be mixed with images, but just make sure your text is in a div tag and has a background of some type (otherwise the images behind it will be visible). To make the text look nice, give it a background (so that other images in Orbit don’t bleed behind it). Just drop it right into the mark-up, this way:

<div id="featured">
   <div class="content" style="">
      <h1>Orbit does content now.</h1>
      <h3>Highlight me: I'm text.</h3>
   </div>
   <img src="overflow.jpg" alt="Overflow: Hidden No More" />
   <img src="captions.jpg"  alt="HTML Captions" />
   <img src="features.jpg" alt="and more features" />
</div>

Using only text? Orbit relies on image sizes to get its dimensions. However, you can just go into the Orbit CSS and find the .orbit div declaration and set it to the exact pixel width and height you want.

Making Orbit Shine

Orbit looks fairly reasonable out of the box (so to speak), but getting a real polish requires a couple more bits of work: in particular, getting a load before images pop in, and adding fixes for some less fortunate browsers (i.e. IE).

Glorious, Seamless Loading State

For those in pursuit of the ultimate polish, we’ve made it easy to create a simple loading state for your slider. Add the following declaration anywhere in the CSS (just replace featured with your slider’s ID, and use your own images’ widths and heights):

#featured {
      width: 940px;
      height: 450px;
      background: #000 url('orbit/loading.gif') no-repeat center center; overflow: hidden; }
   #featured img,
   #featured div { display: none; }

Apply the CSS to your unique slider ID, because the plug-in won’t know the ID until after it loads. Adding this CSS will prevent any unstyled content from flashing before the plug-in finishes loading. These styles are in the demo CSS in the kit.

Non-Relative Positioning

The way Orbit works is that your container gets wrapped by another container. This means that if you are positioning your slider absolute or want to center it with margin: 0 auto, applying these to your slider’s ID (#featured in this example) won’t work. The best way to solve this 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 could also just position the parent container of the Orbit slider if there is one.

As we all know, IE is not a designer or developer’s best friend, but we’ll try to make it easy on you. As of version 1.1, Orbit works in IE7+, but because CSS3 transforms and 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. You can 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]-->

Orbit: jQuery Image Slider6

Orbit: jQuery Image Slider7

Orbit helps you make your images slide around. Check out our demo to see the plug-in in action. It works best in Chrome, Safari, Firefox 3.5+ (but is tested for IE 7+, Firefox 3.5+, Chrome and Safari).

Live demo »8 | Download the kit »9

Reveal: jQuery Modals Made Easy

You can create beautiful modal windows on your page with our jQuery Reveal plug-in. Modal windows allow developers to make critical information stand out. Setting up Reveal modals takes only three easy steps. Attach the needed files, drop in the modal mark-up, then add an attribute to your button.

We created Reveal because we couldn’t find a simple solid solution. We often used and reused our own scripts to create modals because existing plug-ins were too heavy (they allowed for Flash integration and a hundred other things), and they didn’t use basic CSS to create flexible, reusable code. We think we’ve solved both of these issues with Reveal.

Screenshot10

Reveal is useful because it’s easy to implement, compatible with modern browsers (with some graceful degradation, of course) and lightweight (coming in at only 1.75 KB). What this means for you is that it’s fast, sexy and just works.

Let’s see how you can get Reveal working!

Step 1: Attach the Required Files

/* Attach the Reveal CSS */
<link rel="stylesheet" href="reveal.css">

/* jQuery needs to be attached */
<script src="jquery.min.js" type="text/javascript"></script>

/* Then just attach the Reveal plug-in */
<script src="jquery.reveal.js" type="text/javascript"></script>

Clearly, you need the Reveal kit11 (.zip) to do this, so please download it first.

Step 2: The Modal Mark-Up

<div id="myModal" class="reveal-modal">
   <h1>Modal Title</h1>
   <p>Any content could go in here.</p>
   <a class="close-reveal-modal">×</a>
</div>

Just give your modal div the class reveal-modal and a unique ID (we’ll use the ID to launch this modal). The anchor with the class close-reveal-modal provides a button to close the modal (although by default, clicking the faded black background will also close the modal). Placing the mark-up just before the closing body tag is usually best.

Step 3: Attach Your Handler

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

By putting the data-reveal-id attribute on the anchor, the plug-in, when clicked, matches the value of the data-reveal-id attribute (in this case, myModal) with an HTML element with that ID. Basically, put the data-reveal-id attribute on an object, and make its value the ID of your modal.

While the data-reveal-id is a great way to make firing a modal easy, it will often need to be fired programatically. That’s easy enough, too:

/* Programmatic Launching Of Reveal */

<script type="text/javascript">
$(document).ready(function() {
   $('#myButton').click(function(e) {
      e.preventDefault();
      $('#myModal').reveal();
   });
});
</script>

Options

Good plug-ins have options, and this one has just a few, but important ones:

$('#myModal').reveal({
   animation: 'fadeAndPop',                 // fade, fadeAndPop, none
   animationspeed: 300,                     // how fast animations are
   closeonbackgroundclick: true,            // if you click background will modal close?
   dismissmodalclass: 'close-reveal-modal'  // the class of a button or element that will close an open modal
});

If you are wondering how to use the options when you’re using the data-reveal-id implementation, it’s easy: just take the option and add the data- before it, and pass a valid value. Here it is with the default values:

<a href="#" data-reveal-id="myModal"
data-animation="fadeAndPop" data-animationspeed="300"
data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal"
>Click for a modal</a>

Reveal Modal Plugin12

Reveal: jQuery Modal Plug-In13

Surprise your visitors with some elegant modal windows. Download our lightweight modal plug-in and start popping up informative and varied dialogs on your pages. Check out the demo to see this plug-in in action.

Live demo »14 | Live demo »15

Bonus: Raptorize jQuery Plug-In

We’ve all been there: sitting at your desk, coding a large website, knee-deep in Extreme Cheddar Doritos16, sipping on a liter of Code Red Mountain Dew17, when you realize that this page would be…

screenshot18

You immediately race home to grab your Jurassic Park DVDs, so that you can screencap a velociraptor attack. Then you realize how hard it would be to make a raptor run across the website you’re coding. Plus, how will you get that distinctive velociraptor screech? We’ll let you in on a little secret…

We’ve already done it.

Raptorize was created because there was a meme going around the design community about putting velociraptors in visual designs, and we thought there was serious potential for that to live in code. We also wanted to play with some animations, HTML5 audio tags and the Konami Code!

screenshot

First things first: you need to download the Raptorize kit. It has:

  • An awesome raptor graphic, courtesy of Raptorize19;
  • MP3 and OGG audio files for the HTML5 audio on Webkit and Firefox;
  • Our jQuery plug-in, which makes the magic happen;
  • The jQuery library, to make all of the pieces work together;
  • An sample HTML file that has all of the set-up pieces.

First, attach the scripts and activate the plug-in in the head of your document:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"></script>')</script>
<script src="jquery.raptorize.1.0.js"></script>
<script type="text/javascript">
   $(window).load(function() {
      $('.myButton').raptorize();
   });
</script>

The only thing to know here is that you need an anchor or element with the class myButton.

And there you have it. You’re done!

The Options

What’s that? You want to be able to control the entrance handler? You can! Raptorize can be activated on a click event (which is the default), on a timer that fires only after the page has loaded, or on the legendary Konami Code. Our personal favorite is the Konami Code (but it only works once per page load).

//The options for this plug-in
<script type="text/javascript">
   $(window).load(function() {
      $('.button').raptorize({
         'enterOn' : 'click', //timer, konami-code, click
         'delayTime' : 5000 //time before raptor attacks on timer mode
   });
});
</script>

Go ahead, try the Konami Code: ↑ ↑ ↓ ↓ ← → ← → B A.

If you don’t want to store the Raptor image and sound files in the same directory as your JavaScript, just open the plug-in and edit the location of the assets in the first two variables of the code (raptorImageMarkup and raptorAudioMarkup).

While the awesomeness that is the Raptorize plug-in is 100% original code, the idea of including a glorious raptor in a design is not. We owe credit to Phil Coffman and Noah Stokes for the raptor assets and the brilliance of adding a raptor to a design.

Orbit Image Slider Left Arrow Button20

Raptorize: jQuery Plug-In21

Want to relive the glorious ’90s cinematic action-adventure dinosaur flicks on the pages of your website? We have the solution for you.

Live demo »22 |
Download the kit »23

Hopefully these tasty new treats will liven up your pages and make for a more enjoyable experience for you and your visitors.

(kw)

Footnotes

  1. 1 http://www.smashingmagazine.com/2010/06/15/spice-up-your-website-with-jquery-goodness/
  2. 2 http://www.smashingmagazine.com/2010/06/15/spice-up-your-website-with-jquery-goodness/
  3. 3 http://www.zurb.com/playground/orbit-jquery-image-slider
  4. 4 http://jquery.com
  5. 5 http://matt.zurb.s3.amazonaws.com/orbit-1.2.3.zip
  6. 6 http://www.zurb.com/playground/orbit-jquery-image-slider
  7. 7 http://www.zurb.com/playground/orbit-jquery-image-slider
  8. 8 http://www.zurb.com/playground/orbit-jquery-image-slider
  9. 9 http://matt.zurb.s3.amazonaws.com/orbit-1.2.3.zip
  10. 10 http://www.zurb.com/playground/reveal-modal-plugin
  11. 11 http://www.zurb.com/playground/jquery-modal-plugin/reveal.zip
  12. 12 http://www.zurb.com/playground/reveal-modal-plugin
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2011/05/reveal-medium.jpg
  14. 14 http://www.zurb.com/playground/reveal-modal-plugin
  15. 15 http://www.zurb.com/playground/jquery-modal-plugin/reveal.zip
  16. 16 http://www.youtube.com/watch?v=eGS1-2T-wUU
  17. 17 http://www.wikihow.com/Make-Mountain-Dew-Code-Red
  18. 18 http://www.zurb.com/playground/jquery-raptorize
  19. 19 http://raptorize.com/
  20. 20 http://www.zurb.com/playground/jquery-raptorize
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2011/05/raptorize-thumb.jpg
  22. 22 http://www.zurb.com/playground/jquery-raptorize
  23. 23 http://www.zurb.com/playground/raptorize/Raptorize-Kit.zip

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    This is cool!

  2. 2

    Good tutorial, these are awesome plugins I already use them on some of my projects

  3. 3

    The rapture plug-in is awesome

  4. 4

    Thank’s Smashing !

  5. 5

    Guys, it’s time to stop ont using Animate and to start implement some tablet friendly css3 transition (with an animate fallback).

    • 6

      I would love to see this. There’s been plenty of talk about tablets and mobile traffic becoming the new way that people access the internet so things like “Tuning your site for Mobile devices” or “Get Moving with CSS3 Animations for tablets” would be very cool.

      • 7

        Sorry,

        I don’t think it’s nice to critique without saying a little goodness. I think these two new libraries are awesome. You guys are awesome, SmashingMagazine is my homepage at work, at home and I even set it as the default home page on my girlfriends computer =).

  6. 8

    Rapture plugin… The useless one !!

  7. 9

    Did I say Smashing Magazine simply rocks? I think not, so here goes: Smashing Magazine rocks bottom!

  8. 10

    just curious, does the orbit slider play nice with fluid layouts?

    • 11

      Jonathan Smiley

      July 18, 2011 6:19 am

      Hey Dave – We’ve been testing a responsive version of Orbit internally, and we’re pinning down some final bugs and edge cases. We’ll be updating it before long to support fluid / responsive layouts.

  9. 15

    “Today, we are thrilled to introduce two new jQuery plug-ins that were developed exclusively for Smashing Magazine readers”

    What? These have been out for many, many months. Not trying to hate, love the plugins (I’ve used all of them previously). Keep up the good work, ZURB.

    • 16

      Vitaly Friedman

      July 17, 2011 11:59 pm

      Indeed, the plug-ins were released earlier, but they were developed specifically for Smashing Magazine and its audience.

  10. 17

    Nice plugins, how can I implement them on a WordPress site? Especially the Orbit plugin

  11. 18

    What’s the keyboard & screen reader accessibility like on these?

  12. 19

    damn , ZURB rocks for real, thank you for sharing cool stuff again…I love your site btw

  13. 20

    Wow, these are great. Many thanks to Smashing Magazine and ZURB!

  14. 21

    thank you :)

  15. 22

    Zurb rocks! Their plugins are easy to implement and work like a charm!

  16. 23

    Trademark Application

    July 17, 2011 11:27 pm

    Here is a similar story

    The usual approach is to use a jQuery plugin, but while there are plenty of jQuery plugins for lightbox effects and overlay windows, we decided to produce one in-house. There was one main reason for this: frequently with jQuery plugins we find they either over-deliver or under-deliver.

    In the case of our carousel components, for example, we use a mixture of both jCarousel, jCarousel Lite, and our own in-house carousel component. jCarousel adds a fairly large set of page assets and is usually overkill for what we need; jCarousel Lite is smaller but limited in scope, and our own version was built to pacify these two problems.

  17. 24

    Orbit: jQuery Image Slider – why isn’t this working in Chrome?

  18. 26

    Nice effects on the image slider but why forget about using the keyboard for navigation? I would have expected the esc key to close the modal + try using the right cursor key on the image slider – the screen scrolls way over (FF5). Again I would have expected the cursor keys to enable the images to be changed.

  19. 27

    Raptor plugin is probably the most useless plugin ever. Designers playing hollywood stars lol…such a waste of bandwidth.

    • 28

      It’s also one of the coolest and funniest plugins I have ever seen!

      I love it dearly and can’t stop clicking that button!!!

  20. 29

    A nice slider but in IE9 the live demo isn’t formatted properly (the page is all f**ed up). Who needs IE9? Noone. But still, I thought, I’d let you know…

    • 30

      I was pertty baffled by this plugin. I wasn’t able to get it working using just the zip files, as it lacks an html example file. I followed the instructions on this page and they got me pertty much nowhere.I scooped a bunch of styles out of the twentyten stylesheet used on this page that weren’t included in the zip stylesheet pertaining to #tweets. It doesn’t function properly without these styles. Also the jquery code to include on the page mentioned isn’t actually the same as what appears in the source code of this page. Once I swapped it the script started working.Could you possibly create an example file in the download, as well as rectify the instructions? This seems like a pertty good jQuery script, just the implementation is a mess.

  21. 31

    Johan Pettersson

    July 18, 2011 5:17 am

    I was going to use this for RUSTA.se new design but it does not work in IE7. Any work around for that?

    Love the slider though and thanks for building it.

  22. 32

    What is that? A whole article about three useless or obsolete plugins from zurb’s leftover material? Sorry, i really love many articles on SM, but this one is just useless.

  23. 33

    Awesome slider! Thank’s to SM and ZURB!

  24. 34

    Interestingly, the orbit demo doesn’t work for me in IE7 or IE8. Anyone else having this problem? The page is completely messed up.

  25. 35

    Very interesting post!

  26. 36

    Great Article!!

  27. 37

    Three great code blocks. Love these. Thanks!

  28. 38

    Maybe i’m missing something but i’m not getting anything when i ftp the plugin into place?!

  29. 39

    Cool stuff. I’ve seen similar sliders before but Orbit’s stylin’. The Reveal thing is also cool, looking forward to plugging that in sometime.

    Didn’t care much for the Raptor, but whatever floats boats. Thanks for sharing.

  30. 40

    tx for the slider
    I do have a question I like to use a image slider and a text slider. How can i slide sections in another div.?

    I am trying callback another function which should slide to the corresponding div.

    $(window).load(function() {
    $(‘#houseimgs’).orbit({
    timer: false,
    bullets: true,
    afterSlideChange: textSlides
    });
    });

    function textSlides() {
    //slide to corresponding div??
    }

    Any info

    • 41

      ok just
      function textSlides() {
      var theId = “#d” + $(this).attr(‘id’);
      $(theId).toggle().siblings().hide()
      }

  31. 42

    Great plugins! One question though.

    Can I get the Modalbox to show at pageload instead of a trigger link?

    • 43

      I guess you can use =”trigger(‘click’);” from jquery, to autoshow the modalbox..

  32. 44

    Reveal looks slick in the browser, but is not usable on the iPhone.

  33. 45

    Thank you, ZURB! Every site on which I’ve implemented the Raptorize plugin sees a 65-90% improvement in conversion rate! My usual clientele include real estate agents, banking institutions, and mutual funds brokers, and they all love Raptorize.

  34. 46

    I know this may seem to be a complete noob question but has anyone tried or have instructions on tying the Orbit slider into WordPress?

    • 47

      It’s not a straight forward install if that’s what your asking. You need to add the jquery lines into the head for starters. Once i get a working solution i’ll let you know.

    • 48

      Thanks for cornbtiuting. It’s helped me understand the issues.

  35. 49

    Thanks Neil

    I figured there would be jquery adds just like into static files but building functions so they can be controlled from the admin panel is something I am still figuring out.

    • 50

      Still trying to work it out at my end. Can you even get Orbit to appear in the list of plugins? Am i missing something? I’ve added it several times, putting the orbit-1.2.3 folder and the orbit one in the plugins directory.

      Would love someone to tell me where i’m going wrong … ??!!

  36. 51

    I use the Orbit Plugin and i have to say it’s easy to use and very great :-)

  37. 53
  38. 54

    I like Orbit, but theres the Jquery Tools Scrollable, its uses overflow:hidden, but the arrows and the bullets can be outside too.

  39. 55

    hey guys,

    I am a noob concerning jquery and css:
    does anyone know how to put the nav buttons outside the container ?
    because they advertise it in their demo but I dunno where to change what to make that happen.
    any suggestions are welcome ;)

    thanks in advance

    • 56

      You didnt said the name of the plugin your are using, but you can always use = “position:Absolute”, for the nav, and then just play with the values =”top:100px; left:100px”

  40. 57

    hi,
    I am searching for a full-width slider. Can anyone help me with this?

  41. 59

    Johan Vauhkonen

    July 20, 2011 2:13 pm

    Nice stuff! Though Orbit seems a bit unstable right now, sometimes it works and sometimes not with Chrome.

    Refreshing http://www.zurb.com/playground/orbit-jquery-image-slider and the slides don’t show up at times. With my test project it doesn’t work at all in Chrome but fine in FireFox.

  42. 61

    Thanks for this. The timing in posting this could not have been any better!

  43. 62

    Not that I’m at all surprised, but does anyone know why the konami code init of the raptor doesn’t work for IE7?

  44. 63

    I just got around to this post… it’s funny because I just found and used Orbit a couple of days before this article was posted! I really liked the script. It was easy to implement, plays friendly with everything else already on the page. Easy to customize. I’m hiding the side arrows and timer graphic, moved the circle ‘dot icons’ ontop of the divs. I’m using text within the divs and background images. Works well with my .NET calls in the html/text divs. No problems with my dropdown menus that site right above it.

    One thing I did notice… you have to have a least one img in the rotation list… cant be all divs with html/text.

  45. 64

    This slider is really well built, but there’s one thing I’m not sure about (might just be me being a dumbass)….

    When you have captions on every image in the slider there is no transition effect on the caption itself. Is there an easy way to get the captions fading out and in when you navigate between the images??

  46. 65

    Orbit » Great library!
    Although, once the library fixes the size of the animation to a fixed size in pixels… I’m thinking how can we use this on an adaptive/responsive environment?

    Applying the following css all the images disappears
    img.full {max-width: 100%;} or img {max-width: 100%;}

    It would be great if the plugin could adapt the output effect/is fixed size to the context were he (the animation) relies in the moment.

    Any ideas?

  47. 66

    That raptor plugin is going on my site asap.

  48. 67

    Cool concept but super buggy in chrome, ff, safari, and ios.

  49. 68

    Orbit is great and works for me in IE8 but does anyone else notice the verticle “bump” that occurs on some transitions? In FF I don’t see it and it’s super smooth… Ideally I’d just be telling people here “use FF instead” but the majority of my colleagues need to use IE8 so it’s not an option.

    Any ideas on what’s causing it? (and how to fix it?!)

  50. 69

    Great stuff – Smashing is my homepage for a reason.
    I’m very interested in getting Orbit implemented in my WordPress theme – has anyone come up with a good solution yet? I’m fumbling a bit.

  51. 70

    I wonder why it is not possible to add a readme with all the parameters in the package

    because of this lack I have to do a print of the website here and add it to the zip to keep it for furthter use

    1) a simple textfile or
    2) a pdf

    would be nice and make life easier

    just my 5 cents

    • 71

      by the way, your print css is awful, too big fonts!!!

      Code areas are divided by page breaks … all this could be worth a how-to article + realisation / demo with your own print css

  52. 72

    hello there!

    i think there’s a problem in hiding all the slides (if you are just using the text content only)

    i have 5 text slides…. it all mixed up from first upto last slide…. it seems that the text has been toppled up… after showing the 5 text slides… it runs smoothly already.

    how can i solve this display issue? nice plugin by the way :)

  53. 73

    It seems like a great plugin, jest needs some improvements.
    For example, i had the idea to use this slider on a webpage in a following way:
    -i would create a background (two illustrated characters).
    -now i want to make these characters ‘talk to each other’by showing speech bubbles that appear and disappear between the characters, and i would like to achieve it with your orbit slider. Of course my images would be png because i need a transparent background with just the speech bubbles.
    So i downloaded orbit slider and i set the following options:

    $(‘#featured’).orbit({
    animation: ‘fade’,
    bulletThumbs: false,
    directionalNav: false
    });
    and i made a png picture with a speach bubble and a transparent background.

    The only problem is : when this picture comes up, you can still see the picture before in the background :(

    Any ideas how to avoid this?
    Otherwise, nice plugin, light :)
    Cheers

  54. 76

    GeraldFord (Inspiragh Tech)

    August 20, 2011 5:19 am

    Thanks a lot bro…These are wow!

  55. 77

    In my custom theme’s file, I have the CSS code:

    img, object, embed{ max-width: 100%; }

    In a CSS file called after the one containing the code above, I set specific width dimensions for the image in my Orbit div.

    Theoretically, the max-width shouldn’t be messing it up at all, however, it completely ruins Orbit.

    Any idea what’s causing this?

  56. 78

    With the old version of orbit, I could make the images themselves clickable. Now, if I have tags around the image, orbit stops working :-( can this feature be added back in?

  57. 79

    also… for some reason the “play” part of the pause/play button will not show up. I have honestly tried everything I can think of.

  58. 80

    The slider seems broken in Chrome 14.

  59. 81

    Any way to fire successive reveal modals? Like triggering one reveal from the other?

    These modules rock – they worked the first time I plugged them in to my site with zero hassle and they’re so nicely done that barely any modding was necessary. NOT the case with so many other scripts, which are nightmares to customize or don’t work on certain browsers etc. etc….THANKS!

  60. 82

    Orbit is brilliant… however, is there anyway to make thumbnails more enduser friendly, i cant tell my clients to make a set of thumbnails and stick them on a webserver everytime they want to change an image on the slider, is there a way i could just pass it an array of alternate images to use as thumbs…

  61. 83

    Is it possible to wrap the featured images inside an href? I’m using the reverie framework and the slider seems to break if I wrap the images inside an href.

  62. 84

    Regarding the orbit slider, under ‘Using Text’, can you guys explain why you are using an empty style tags as in class=content style=”” ?

  63. 85

    Hello,

    If you any query in coding related to LIVE CLOCK IN JQUERY & how to solve to problem in LIVE CLOCK IN JQUERY . So you are connect to link thus you problem solve by this link:- http://www.dotnethunt.com//22/live-clock-in-jquery

  64. 86

    Usually I don’t learn article on blogs, however I would like to say that this write-up very pressured me to take a look at and do it! Your writing taste has been surprised me. Thank you, very nice post.

    Prescription Safety Glasses

  65. 87

    Its a nice slider and awesome jquery thanks for sharing .

  66. 88

    As for Orbit: A Slick jQuery Image Slider Plugin, check this article: http://zurb.com/playground/orbit-jquery-image-slider
    To get started you´re going to need jQuery and the Orbit plugin (make sure jQuery is attached first).
    related article: http://www.rasteredge.com/dotnet-imaging/

↑ Back to top