jQuery Cycle Plugin - Dicter la localisation des vignettes

Question

Ce que je voudrais faire, c'est dicter où sont mes vignettes au lieu d'utiliser les images principales comme vignettes.

Je suis assez sûr que cela peut être fait, j'ai juste besoin d'un peu de poussée dans la bonne direction.

Voici mon code:.

<script type="text/javascript"> 

$ ('# de imageContainer') avant (''). Cycle ({ fx: 'fondu', vitesse: 2000, délai d'attente : 8000, téléavertisseur: '#nav',

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(i, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" width="121" height="67" /></a></li>'; 
} 

});

Et voici le HTML:

<div id="container"> 
<div id="imageContainer"> 
    <img src="http://www.ifcj.org/ifcj-08/images/elements/slideshow/1.jpg" rel="http://www.ifcj.org/ifcj-08/images/elements/slideshow/1t.jpg" width="378" height="210" /> 
    <img src="http://www.ifcj.org/ifcj-08/images/elements/slideshow/2.jpg" rel="http://www.ifcj.org/ifcj-08/images/elements/slideshow/2t.jpg" width="378" height="210" /> 
    <img src="http://www.ifcj.org/ifcj-08/images/elements/slideshow/3.jpg" rel="http://www.ifcj.org/ifcj-08/images/elements/slideshow/3t.jpg" width="378" height="210" /> 
</div> 
<div id="nav"></div> 

Toute aide serait faire.

merci Vous

Answer 1

Si vous parlez d'un scénario comme celui décrit ici http://malsup.com/jquery/cycle/pager2.html, vous devriez être en mesure de faire quelque chose comme ce qui suit:

pagerAnchorBuilder: function(id, slide) { 
    var thumb_prefix = "t_"; 
    return '<li><a href="#"><img src="' + thumb_prefix + slide.src + '" width="50" height="50" /></a></li>'; 
} 

Ceci est l'exemple le plus simple, de Bien sûr, vous pouvez faire quelque chose de différent selon votre convention de nommage et l'application particulière, par exemple en insérant à la fin avant l'extension:

pagerAnchorBuilder: function(id, slide) { 

    // Split off the filename with no extension (period + 3 letter extension) 
    var new_src = slide.src.substring(0,slide.src.length-4); 

    // Add the "t" 
    new_src += "t"; 

    // Add the period and the 3 letter extension back on 
    new_src += slide.src.substring(slide.src.length-4,slide.src.length); 

    // Set this as the source for our image 
    return '<li><a href="#"><img src="' + new_src + '" width="50" height="50" /></a></li>'; 
}