Creating A Custom Caption Transition For jQuery Cycle

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.

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.

CaptionsCyclejQueryTransition