Creating A Custom Caption Transition For jQuery Cycle

/ jQuery / by Paul Robinson / 9 Comments
This post was published back on March 31, 2012 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

jQuery Cycle comes with a great set of transitions already available within the plugin, but what if you use captions with your slider?

So let’s spruce those boring old captions up a little, click through to the demo to see it in action.

Fancy Pants Custom jQuery Slider Captions

Images used in slider from The Big Bang Theory © WB/Chuck Lorre Productions. Used for illustrative purposes, no infringement intended.

So, what do you think? Like the look of it? Well let’s take a look at how it’s done.

HTML

First we need some HTML. This bit is sometimes different depending on the situation, but the idea is to have an outer container, then a container and your slides within it. In my case this is a <div> as the outer container, then a <ul> as the container and <li> tags as the items. Like this:

You may notice the extra <div> tags inside the list. This holds our caption text. To create the multi line caption effect I’ve included some <span> tags with various classes. I’ll post the CSS in a moment.

The HTML is pretty basic, just a list with an image inside. The image is wrapped in a hyperlink, which is of course optional. The caption elements will not be shown due to how the animation works. Instead those elements will be hidden and the text used to populate the caption element which you can see after the list. Hopefully things will make a little more sense soon.

CSS

Next we need a little CSS to make things look a little prettier. Here is some basic CSS that I used to create the demo.

There are a few bits of new CSS in there, but through the magical art of progressive enhancement (or graceful degradation depending on your view) it looks good all the way back to Internet Explorer 7. I no longer care about IE 6 since it has been officially declared dead by Microsoft.

There are a few important CSS rules. First you must have a width in your slider container. Next the z-index to allow the caption to be on the correct depth. The z-index order must be (from lowest to highest) slider -> caption. If you don’t have them in that order there is a high chance your caption will be hidden under the slider. Don’t forget that you must have display: none set for the element that holds your caption for each slide. In my case this is any element with the class .captionHidden.

The other important part is that your caption element (.caption) must be positioned absolute, and your outer container element (#sliderCont) must be positioned relative. This allows us to animate the position of the caption relative to the slider instead of relative to the browser window. All the other styling is just to spruce things up a little.

jQuery

Before we get started some pre-requisites. First we need jQuery. You can get it from the jQuery website, or you can attach it using Google’s Library API. Next is jQuery Cycle & finally you’ll need the jQuery easing library (V 1.3), and it’s compatibility library.

Now we’ve gotten all that out of the way we need to setup jQuery Cycle. Here is the standard jQuery Cycle init code, with a little change so we can run out custom transition.

As always we need our DOM ready, I’ve used a WordPress compatible version from force of habit. Next is the standard jQuery Cycle init code. We target our containing element #slider and initialize Cycle on it. We hand it the name of our custom transition, which we haven’t created yet, and a timeout. For my demo I used the easing ‘backout’, but feel free to pick a different one by looking at them on the jQuery easing website.

Next up we need to create our custom transition. I’m going to post all of the code then explain. Please note, if you haven’t used the same classes & IDs as I have the code will need a little customising to work with your HTML.

Okay. As always it looks slightly more complicated than it is. I’m going to go through explaining what it does in sections, but first here is a quick list of the things you need to change in case you just want to copy & paste.

  1. Change $caption‘s value to the jQuery selector that identifies the ID or class of your caption holder.
  2. Change find('.captionHidden') to the ID or class of the hidden element that holds the caption for each slide.

After changing those you should be pretty much ready to go. If you want to customize the animation a little more check out the end of this tutorial.

Now let’s get onto explaining how the transition works. We can’t just animate the caption, we must also recreate the animation for the slide since the transition in jQuery Cycle controls both. So first:

The first line adds a new transition called captionSlide to jQuery Cycle’s transitions. We also set up a variable that holds the jQuery object for our caption element, this is a common practice and helps with memory. We also force the outer container #slideCont to hide any overflow. The last line attaches a function to the jQuery Cycle fx function that we will use to contain our animation.

The first line takes our next slide and positions it off to the right hand side by using the slide container’s width. The second line takes our caption & animates it off the left side of the visible slide area. It does this by taking the current captions width & multiplying it by 1.5. We do that to give extra space if the next caption is longer. We also set the time, grab the easing we set & open a callback.

The rest is best explained together, so here we go.

While the caption is hidden from view we find the hidden caption for the next slide and copy it’s inner HTML to the caption element. Next we animate the current visible caption off to the left the width of the container, using a callback we then set it to display: none; to keep in line with jQuery Cycle’s normal pattern.

The last section deals with the next slide. It sets display: block; and animates it back home to 0 pixels. Using a callback we slide the caption back in to it’s original position. Using a second callback we then trigger the jQuery Cycle callback which in turn triggers the next slide after the timeout set in the options.

Notes

So there are a few notes about this whole tutorial.

First. If you want to have the caption animate to a different position, it’s totally possible. All you need to do is change the captions starting point in your CSS and change $caption.animate({ left: '35px' }, to match it. You can even change it’s position to the right hand side, you just need to change any left: to right. Just make sure the lines refer to the caption & not the slide. All lines relating to the caption start with $caption so it’s fairly easy to spot them.

Second. Because the animation speeds are hard coded, setting the speed option in the jQuery Cycle options will have no effect. I could have set the speeds by passing the option through as I have with the easing, but I wanted to fine tune the caption speed in comparison to the slide speed.

9 Comments

Author’s gravatar

Just what I was looking for!
One thing I noticed: in css .captionHidden is supposed to be .hiddenCaption
Thanks for the tutorial!

Reply
Author’s gravatar author

Hi Matt,

Awesome glad it was helpful.

Thanks for spotting that mistake. It’s actually the other way round, the second paragraph below the CSS was wrong it should be .captionHidden since the jQuery code references it like this line:

I’ve corrected the error though & again thanks for telling me about it. 😉

Author’s gravatar

Thanks for sharing! Nice tutorial! 🙂

Reply
Author’s gravatar

This is actually a lot easier to do using the cycle plugin’s before and after options. The markup becomes something like this:

You can add animate left and easing functions as you wish in place of my hides and fade ins, I just threw that in there to save time.

Reply
Author’s gravatar author

Hi Jamie,

That is true. I needed to use the method shown for the project I was working on mainly for customization, and I decided to show the more complicated way in this tutorial. I also came across a few problems that I couldn’t quite iron out when trying to get the captions to play nice with the callback method if animating in any other way than fading. Strange things happened with the animation that I couldn’t seem to fix.

Also I don’t know if you can with the before/after method, but using the FX method you can add it into your jQuery Cycle plugin file with the other animation effects to keep it handy.

Thanks for showing this method though. 🙂

Author’s gravatar

Great post..Question: if you needed to animate 2 captions one from the left and one from the right.. could you explain how you might accomplish this ?

Reply
Author’s gravatar author

Hi Buck,

That would all depend on if you need to animate both captions at once or alternating directions per slide. If you mean both from the left & right on one slide then you would have two caption containers (obviously don’t use an ID if you do) and also have two captions per slide. Then you would just have to code grab both captions & move them both in.

If you mean alternating left on one slide then right on the next you could use the $slides variable & do a modulo on 2 alternating the code it uses to pull the caption in.

If you need further help with it please feel free to drop me an email, it’s quite a big subject to be writing here in the comments & the code would depend upon the situation a fair bit.

Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more