Search code examples
jquerycycle

Jquery Cycle: Cycling gallery, thumbnails AND captions?

I'm using Malsup's cycle() JQuery plugin, and am trying to get it to display both the image in the gallery, a list of thumbnails, and a caption under each thumbnail. The code I have is as follows:

<div id="slideshow">
    <ul>
    <li style="background-image:url(img/jack.jpg);"><a href="#"><img src="img/jack-title.png" alt="Visit Jack"/></a></li>
    <li style="background-image:url(img/jill.jpg);"><a href="#"><img src="img/jill-mysteries.png" alt="Visit Jill"/></a></li>
    <li style="background-image:url(img/jenn.jpg);"><a href="#"><img src="img/jenn-title.png" alt="Visit Jenn"/></a></li>
    </ul>
</div>

<div id="nav"></div>

<script type="text/javascript">
$("#slideshow ul").cycle({
    pager:'#nav',
    pagerAnchorBuilder: function(idx,slide){return '<a href=""><img src="tn_'+idx+'.jp" width="50" height="50"/><br/></a>';
    }
    });
</script>

This all works fine, except for the fact that I can't seem to access the ALT attribute on each of the cycle'd images. I'd like to use that to make the caption (to be added after the linebreak BR in pagerAnchorBuilder). Anyone know how to get at that?

Solution

  • see this fiddle: http://jsfiddle.net/bwwcq/ (no images, of course)

    the line in question is:

    var alt = $('img', slide).attr('alt');

    love this plugin btw.