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.
[crayon]
$(‘#slide_after’).cycle({
fx: ‘shuffle’,
timeout: 2000,
slideExpr: ‘img’,
after: function() {
$(‘#caption’).html(this.alt);
}
});
[/crayon]
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:
[plain]
[/plain]
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.
[crayon]
$(‘#slide_before’).cycle({
fx: ‘shuffle’,
timeout: 2000,
slideExpr: ‘img’,
before: function() {
$(‘#caption2’).html(this.alt);
}
});
[/crayon]
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:
[plain]
[/plain]
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.
[crayon]
$(‘#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);
}
[/crayon]
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:
[plain]
()
[/plain]
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.
Hi,
I have tried jcycle on my website and it looks great! I tried implementing example 3 on my website(you can check it at http://muzikki.com/gallery/5/) at the related videos section below the main gallery. Everything works fine except when the dynamically generated gallery has only one picture, the slide caption does not show. How do I go about showing the caption even when I have only one image? Thanks for this great implementation.
Hi Nikk,
My first thought is that a slideshow isn’t the best way to show just one picture, but perhaps you’ll be adding others at a later time. If you do that, this problem would go away. ;)!
According to malsup’s page: “The before option specifies the name of the callback function to be invoked immediately before a slide transition.” So, without another photo in place for the second slide, the first transition is never reached. Therefore, the caption is not showing in your one-photo slider.
You could use a simpler version, like in Example #1, that doesn’t rely on the before option.
Thanks for stopping by and good luck!
Thanks for the guidance. Using the same, I managed to write a script that toggles between the two slideshows based on the number of available images. I had looked for the info and was almost giving up for another solution. Thanks again.
Great job, Nikk!
Will there be a feature that includes buttons to go forward and backward?
Hi Tim,
I’ll post an example soon for a cycle slider that has prev|next buttons. Until then, have a look at the script that slides the photos on this site: Danville Pharmacy. Pause and play buttons are also coded there.
More later!
Here’s a post that explains how to use previous next buttons in jquery cycle slideshows.
I can’t get it to work and I don’t know what I do wrong. The ALT-tag is present and filled with information and I have a paragraph with id caption.
$(document).ready(function() {
$('#pause').hide();
//
$('.slideshow').cycle({
fx: 'fade',
speed:250,
timeout: 4000,
next: '#next',
prev: '#prev',
after: function() {
$('#caption').html(this.alt);
}
});
//
$('.slideshow').cycle('pause');
//
$('#pause').click(function() {
$('.slideshow').cycle('pause');
$(this).hide();
$('#resume').show();
return false;
})
//
$('#resume').click(function() {
$('.slideshow').cycle('resume');
$(this).hide();
$('#pause').show();
return false;
})
});
Hello Jan,
I tried your slideshow and found that it works just fine. I took out all the commented lines ‘//’ and found that the slideshow starts in the paused state. One must click on the resume button to get the show to continue. Use your CSS to make sure the pause/resume/caption areas are visible. The things that you’ll want to check to get the show started include:
Try it again and let us know how you do.
Thanks.
Thanks for your help. The slideshow should start in a paused state and it functions fine. The captions just don’t show up. However, when I insert
slideExpr: ‘img’, the caption and the images are loaded but I can’t use the next, previous or play button anymore. When I start the slideshow unpaused by doing this://$('.slideshow').cycle('pause');, the slideshow plays and displays the richt captions, but I can’t use the control buttons. It seems that it has something to do with the buttons?Also, when I use
slideExpr: ‘img’,the images in my slidshow are no longer centered.Jan,
Could you send a link to the page using this code? I’m curious what’s going on here.
I haven’t got a sample online yet. I think it has something to do with the fact that cycle looks for the img tag and the control buttons are images too.
You could try to separate the images in a sense by wrapping one set in a different div or p. Then using slideExpr: ‘img’ or slideExpr: ‘div’, which ever is appropriate for the images and not the buttons.
I put up a test version with some good looking guys here: http://www.denisdendaas.nl/test/. I hope we can get it to work. It’s for a client of mine. The images and captions are separated, but still it does not work. The images are loaded correctly, but the slides are now aligned to the left and you can’t use the buttons.
When I set the slideshow to start automatically, the captions are displayed as they should but the slides are aligned to the left.
When I remove ‘slideExpr: ‘img’,’ the buttons work, the slides are centered but no captions are visible.
Jan –
It may be a simple fix by removing the comma directly after
slideExpr: ‘img’. With the last comma present the interpretation may be different. Try removing that comma and let us know what happened.Oh, I just saw that the img tags are inside of divs on your page, so instead of
slideExpr: ‘img’, tryslideExpr: ‘div’and see what happens. The images are wrapped in divs so the div is the sliding component, not the image alone.Make sense?
I removed the comma and tried ‘div’ instead of ‘img’. Now the slideshow buttons work, but no captions are shown. I think now the slideshow doesn’t know where to find the alt tags anymore. After this test I rearranged the code somewhat, so now the comma is needed. Doesn’t make a difference though. As soon as I change ‘slideExpr:’ to ‘img’ the whole thing goes bad.
Jan –
Since the images are wrapped in divs, definitely use
slideExpr: 'div'.Whatever option is last in the list should not have a comma following it. So, instead of this:
$('.slideshow').cycle({
fx: 'fade',
speed: 250,
timeout: 4000,
next: '#next',
prev: '#prev',
slideExpr: 'div',
after: function() {
$('#caption').html(this.alt);
},
});
Remove the last comma, like so:
$('.slideshow').cycle({
fx: 'fade',
speed: 250,
timeout: 4000,
next: '#next',
prev: '#prev',
slideExpr: 'div',
after: function() {
$('#caption').html(this.alt);
}
});
Ah thanks, I forgot that comma, but it doesn’t matter anyway. No captions.
When I remove the ‘div’ from the ‘img’ it all works, but the images are no longer centered. Apparently I can’t use extra tags around the images. How can I center the images horizontally then?
I looked online for a solution, but I didn’t find one that worked in all browsers. I can’t use this script and decided to switch to PHP. No fancy transitions or autoplay, but it works everywhere and always.
I looked online for a solution, but I didn’t find one that worked in all browsers. I can’t use this script and decided to switch to PHP. No fancy transitions or autoplay, but it works everywhere and always. Thank you very much for your help and good luck with your website.
You might want to check this post that shows how to center slides in a slideshow with jQuery. Good luck.
Good luck to you too, Jan.
Thanks for your tutorials,
I was wandering if there is any way to overlay the captions on the slideshow?
Is there any example?
Hi Alex,
In order to show the captions on the slideshow I presume that you mean to overlay the captions on top of the images, but I found no easy way to do it for this example.
Here, the captions are being brought into the paragraph which can be located above or below the div that is receiving the images for the slideshow. By slipping the paragraph inside the div of images the captions can be shown on the top of the images, but in my attempts I could never get the captions to show for more than a second or two before the next slide comes in.
You might be able to use a pause or delay function with Cycle’s before or after functions. Let us know if your attempts work out.
Good luck!