jQuery Cycle avec des ancres et des miniatures

Question

J'utilise le plugin jQuery Cycle pour créer un diaporama dans lequel l'image principale est enveloppée dans une ancre, ainsi que la navigation par vignettes. J'ai fondamentalement le même code du demo page de cycle de jQuery. Une fois que j'ai enveloppé les images dans un lien, les vignettes se sont cassées. J'ai essayé de laisser tomber le "slide.src" pour $('#slideshow img).attr('src') mais cela revient toujours comme non défini.

$('#slideshow').before('<ul id="slideshow-nav">').cycle({ 
fx: 'fade', 
speed: 'slow', 
timeout: 0, 
pager: '#slideshow-nav', 

pagerAnchorBuilder: function(idx, slide){ 
return '<li class="thumbnail"><a href="#"><img class="rounded" src="' + slide.src + '" width="137" height="129" /></a><span class="highlight"></span><span class="gloss"></span></li>'; 
} 
}); 

Et mon code HTML est celui-ci.

<div id="slideshow"> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
<a href="#"><img src="images/gyro.jpg" alt="Gyro"></a> 
</div> 

Answer 1

Vous devez fournir un fragment HTML valide à $.before(). Pour le moment, vous n'avez pas de balise de fermeture </ul>. La propre façon de le faire est à l'auto-fermer la balise:

$('#slideshow').before('<ul id="slideshow-nav" />').cycle({ ... 

Si vous utilisez Firebug ou les outils de développement dans un navigateur Webkit, vous pouvez toujours voir quels éléments jQuery est de trouver en écrivant console.log($("#slideshow-nav")); ou console.log($(slide)); dans votre fonction de rappel.

Answer 2

Peu importe, j'ai trouvé une erreur ailleurs dans mon script qui modifie les vignettes qui, pour une raison quelconque, brisait les images.