As imagens pagerAnchorBuilder do plugin jQuery Cycle se tornam indefinidas
Eu tenho uma apresentação de slides embutida no flash que quero imitar no jQuery. A apresentação de slides usa as imagens da apresentação de slides como números de pager. O problema que estou tendo é que, depois de aplicar os links às imagens da apresentação de slides, a imagem pagerAnchorBuilder retorna um indefinido para o src da imagem.
Javascript -
$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'fade',
timeout: 7000,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="100" height="60" /></a></li>';
}
});
});
HTML -
<div id="slideshow" class="pics">
<a href="http://google.com"><img src="home_1.jpg" width="1000" height="600" /></a>
<a href="http://google.com"><img src="home_2.jpg" width="1000" height="600" /></a>
<a href="http://google.com"><img src="home_3.jpg" width="1000" height="600" /></a>
<a href="http://google.com"><img src="home_4.jpg" width="1000" height="600" /></a>
<a href="http://google.com"><img src="home_5.jpg" width="1000" height="600" /></a>
</div>
Se eu remover o href da apresentação de slides, as imagens no pager serão exibidas sem problemas. Não tenho certeza se isso é um bug ou algo que eu preciso encontrar uma correção para?
Aqui está a resposta -
$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'fade',
timeout: 7000,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
var img = $(slide).children().eq(0).attr("src");
return '<li><a href="#"><img src="' + img + '" width="100" height="60" /></a></li>';
}
});
});