jQuery Cycle plugin pagerAnchorBuilder images devenir indéfini

Question

J'ai un diaporama construit en flash que je veux imiter dans jQuery. Le diaporama utilise les images du diaporama comme numéros de pager. Le problème est que lorsque j'applique des liens aux images du diaporama, l'image de pagerAnchorBuilder retourne un indéfini pour le src de l'image.

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> 

Si je retire les href de du diaporama les images du téléavertisseur montrent sans problèmes. Je ne sais pas si c'est un bug ou quelque chose que je dois trouver une solution pour?

Voici la réponse -

$(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>'; 
    } 

}); 

});

Answer 1

Lire ceci peut vous aider!

jQuery Cycle pagerAnchorBuilder

Answer 2

semble être un problème commun! Consultez cycle with anchors et « slideExpr » ALSO cycle de

Answer 3

je JQuery.find() pour aider à trouver les images, et de garder suffisamment modulaire de code à utiliser avec différentes balises:

pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' 
     + jQuery(slide).find('img').attr('src') 
     + '" width="120" /></a></li>'; 
} 

Answer 4

En ce qui concerne le commentaire de JVerstry (nice one JV btw!), J'ai obtenu ce qui suit juste très bien qui utilise l'image et le lien <a>. Aussi les pouces pager montrent aussi l'attribut de l'image principale alt:

return '<li class="slider-thumb"><a href="'+slide.href+'" id="pager-click" title="'+slide.title+'"><img src="'+ $(slide).find('img').attr('src')+'" width="90" height="69" class="fader" /></a><p class="slide-caption">'+ $(slide).find('img').attr('alt')+'</p></li>';