Slideshow Image Captions with jQuery Cycle

If a picture is worth a thousand words, a photo slideshow would be worth a whole book. Images can be interpreted in many ways and without some accompanying text or captions for the images in a slide show, you force the visitor to draw their own conclusions about what they are viewing. In the art world this may be ok and perhaps what you’re striving for, but most of the time we want to provide additional information with images so the visitor really knows what the imagery is all about.

Some images are fairly meaningless without captions. Were those pictures taken before or after the event? And is that really Aunt Tillie as a hip youngster?! You get the idea…captions help us to tell our stories. They can be as short and sweet as you like or more explanatory in nature. It just depends on your purpose as to what kinds of captions your visitors would benefit from.

Presented here are three examples for producing image captions in slideshows with jQuery Cycle.

To make an image caption for jQuery Cycle slideshows, the examples that follow depend on passing selectors, like this.alt, to the .html() method to pick up the alt text from each <img>. Also, we’re going to use Cycle’s after and before options to specify our image captions.

Example 1: Use Cycle’s after option to specify a caption using the image’s alt text. Caption will appear after the slide is in place.

$('#slide_after').cycle({
   fx: 'shuffle',
   timeout: 2000,
   slideExpr: 'img',
   after: function() {
     $('#caption').html(this.alt);
   }
});

Here, the after option takes the result of an anonymous function as its value. The function() inserts the alt text from this, the current image, into #caption. In the HTML markup below notice that #caption identifies a paragraph below the images.

Example 1 HTML Markup:

Example 1 Slideshow:

Example 2: Use Cycle’s before option to specify a caption using the image’s alt text. Caption will appear before the next slide.

$('#slide_before').cycle({
    fx: 'shuffle',
    timeout: 2000,
    slideExpr: 'img',
    before: function() {
      $('#caption2').html(this.alt);
    }
});

The only things changed from Example 1 are that we’re using Cycle’s before option instead of the after option and the captions are placed at the top of the images instead of below them.

Example 2 HTML Markup:

Example 2 Slideshow:

Example 3: Show slide number and total count of slides in addition to the image’s alt text for a caption.

To get the slide numbers we can take advantage of a couple of variables that keep track of the current slide and the number of total slides. We’ll pass three Cycle variables (curr,next,opts) to a new function.

$('#slideboth').cycle({
    fx: 'fadeZoom',
    timeout: 2000,
    slideExpr: 'img',
    after: slideAfter,
    before: function() {
      $('#caption3').html(this.alt);
    }
});

function slideAfter(curr,next,opts) {
   var caption_count = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
   $('#caption4').html(caption_count);
}

There’s something new going on here. A named function, slideAfter, is the value for the after option. Using a function we can make calculations and assignments to create some interesting captions. Cycle’s before option also may take a function as its value.

The function slideAfter calculates and specifies the number of the current image and the total number of slides in the slideshow. The calculated values are assigned to a variable, caption_count, which is then used as the image caption.

Example 3 HTML Markup:

  

    
    
    
    
  
  
  ()

In this example #caption5 is used for CSS positioning, while #caption3 and #caption4 are targeted by the JavaScript in creating the caption.

Example 3 Slideshow:

  ()

Examples borrowed from jQuery Cycle image count caption demo.

These examples showed how to create captions for images presented in slideshows with the jQuery Cycle plugin.