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"开发者_StackOverflow社区></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?
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.
http://jquery.malsup.com/cycle/int2.html
Callbacks Before and after callbacks are supported for each slide transition. Within the context of your callback method, this is the element that is transitioning in.
$(this).attr('alt')
untested, but should get the job done.
精彩评论