Add Captions to jQuery Cycle Slideshows

It is pretty easy to add captions to jQuery Cycle slideshows even though there is no ‘out of the box’ way of doing this.

The after option allows you to specify a function to be executed after the slide transition has finished and this is what we will be using to add captions to your slideshow.

You simply need to modify your image tags to include a caption for the image and add in a placeholder for the caption to go:

<ul id="slides">
	<li><img src="img1.jpg" alt="" data-caption="Caption for Image 1"></li>
	<li><img src="img2.jpg" alt="" data-caption="Caption for Image 2"></li>
	<li><img src="img3.jpg" alt="" data-caption="Caption for Image 3"></li>
	<li><img src="img4.jpg" alt="" data-caption="Caption for Image 4"></li>
<div id="imageCaption"></div>

Then, you can put a simple function in the after option to extract the caption from the visible slide with jQuery and put this into your placeholder:

	after: function(){
		$('#imageCaption').html($('#slides li:visible img').data('caption'));

This can be easily extended to titles and any other information you need to present with your images. You just put any additional data for the image in to the image tag’s data-attributes and you can access them in the same way:

$('#slides li:visible img').data('your-data-attribute');

You can download the jQuery Cycle plug here

Did you like this post? Why not subscribe?

2 thoughts on “Add Captions to jQuery Cycle Slideshows

Leave a Reply

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