jQuery plugin Cycle images pagerAnchorBuilder devenant non définie

Question

J'ai un diaporama flash intégré que je veux imiter dans jQuery. Le diaporama utilise les images du diaporama comme les numéros de téléavertisseur. Le problème est im avoir une fois que j'applique des liens vers les images du diaporama l'image 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 supprime les années href du diaporama les images du téléavertisseur apparaissent sans problèmes. Je ne suis pas sûr que ce soit 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 cela peut vous aider!

  

jQuery Cycle pagerAnchorBuilder

Answer 2

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 3

En ce qui concerne le commentaire de JVerstry (nice one JV BTW!), Je suis arrivé ce qui suit va très bien qui utilise l'image et <a>link. Aussi les pouces téléavertisseur montrent aussi l'image principale attribut 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>';

Answer 4

Il semble être un problème commun! Consultez avec des ancres et aussi "slideExpr" de cycle