pageAnchorBuilder question - Cycle Plugin - JQuery: Modification des boutons d'image

Question

J'utilise le plugin Cycle pour JQuery pour créer un rotateur de bannière avec la fonctionnalité pauseOnHover. Je l'ai fait fonctionner correctement et même avoir le pageAnchorBuilder fonctionnant correctement de sorte qu'il affiche une image contre '1,2,3, etc. Le problème est qu'il ne peut pas trouver les images parce que je n'utilise pas les images comme le sélecteur mais divs.

Comment puis-je modifier le code suivant pour me permettre de spécifier quelle image unique afficher pour chaque diapositive (div)? Lorsque je place l'URL de l'image (../images/tab.png) dans la balise img src, elle affiche un lien brisé. Même si cela fonctionnait, cela ne permettrait pas d'accomplir ce que j'essaie de faire, afficher une image unique par div.

Je suis en train de créer une version javascript de quelque chose comme ceci: http://www.bazaarvoice.com

Voici mon code:

banner.js

$(document).ready(function() { 
    $('.slideshow').cycle({ 
     speed:  200, 
     timeout: 15000, 
     pager:  '#tabs', 
     pagerEvent: 'mouseover', 
     pauseOnPagerHover: true, 
     pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement) 
    return '<a href="path-to-link"><img src="' + slide.src + '" height="47" width="189" /></a>'; 
} 


    }); 
}); 

Answer 1

Je pense que vous avez la mauvaise idée de ce que la fonction pagerAnchorBuilder est réellement. Vous devriez déjà avoir les éléments dans le DOM et retourner le JQUERY SELECTOR pour ces éléments, ce qui correspond à chacune des diapositives (généralement par l'index passé à la fonction). Voir l'un des demos here. Cela peut vous aider à mieux comprendre ce qui se passe là-bas.

Si vous essayez de construire un cycle qui fait défiler les points d'ancrage, vous devez faire rien de plus que d'inclure votre point d'ancrage des balises HTML à l'intérieur du (probablement) div.slidehow:

<div class="slideshow"> 
    <a href="path-to-link1"><img src="/images/src1.png" height="47" width="189" /></a> 
    <a href="path-to-link2"><img src="/images/src2.png" height="47" width="189" /></a> 
</div> 

et le plug-in Cycle fera Pour toi. Il y a quelques limitations to using images inside anchors avec ce plugin, cependant.