Jquery Cycle Plugin Question

Question

J'ai installé avec succès le plugin Cycle pour Jquery et j'ai fait en sorte que mes bannières se déplacent comme je le souhaite. Ma question concerne la construction des ancres. J'essaie de construire quelque chose de similaire à http://www.bazaarvoice.com.

On dirait que les ancres sont générées à partir du javascript mais je peux me tromper. Voici mon html et javascript.

HTML

<div id="slideshow"> 
     <ul class="pager"> 
      <!-- will be populated with thumbs by JS --> 
     </ul> 
     <!-- each div is considered as a slide show --> 
     <div><img src="/images/banner1.png" />You can place text here too !</div> 
     <div><img src="/images/banner2.png" />and here</div> 
     <div><img src="/images/banner3.png" />and even here</div> 
    </div><!-- close #slideshow --> 
<div id="tabs"></div> 

Javascript

$("#slideshow").cycle({ 
    fx:   'fade', // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle) 
    timeout:  5000, // milliseconds between slide transitions (0 to disable auto advance) 
    speed:   400, // speed of the transition (any valid fx speed value) 
    pager:   "#tabs",// selector for element to use as pager container 
    pagerClick: null, // callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement) 
    pagerEvent: 'hover',// name of event which drives the pager navigation 
    pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement) 
     return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>'; 
    }, 
    before: function(){ // deselect all slides 
     $(".thumb").removeClass('selected'); 
    }, 
    after: function(foo, bar, opts){ // select current slide 
     $("#thumb-"+opts.currSlide).addClass('selected'); 
    }, 
    fit:   1,  // force slides to fit container 
    pause:   1,  // true to enable "pause on hover" 
    pauseOnPagerHover: 1, // stop slideshow when pagers are being hovered 
    autostop:  0,  // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 0,  // number of transitions (optionally used with autostop to define X) 
    slideExpr:  "div", // all content of div#slider is a slide. but not the pager 
    fastOnEvent: 100, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms 
}); 

On dirait que ce serait dans le pagerAnchorBuilder mais pas sûr.

Answer 1

semble que vous manquez la balise d'ancrage commençant

pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement) 
    return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>'; 
}, 

droit entre le <li> et l'<img> il devrait être. Il semble que vous ayez déjà la fin. la façon correcte devrait ressembler à ceci:

pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement) 
    return '<li class="thumb" id="thumb-1"><a href="path-to-link"><img src="' + slide.src + '" height="30" width="40" /></a></li>'; 
}, 

si vous voulez changer le lien basé sur l'ID de la diapositive, vous voudrez peut-être quelque chose comme ceci:

pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement) 
    switch(slide.attr("id")){ 
     case "one": return '<li class="thumb" id="thumb-1"><a href="path-to-first-link"><img src="' + slide.src + '" height="30" width="40" /></a></li>'; 
     case "two": return '<li class="thumb" id="thumb-1"><a href="path-to-second-link"><img src="' + slide.src + '" height="30" width="40" /></a></li>'; 
     case "three": return '<li class="thumb" id="thumb-1"><a href="path-to-third-link"><img src="' + slide.src + '" height="30" width="40" /></a></li>'; 
    } 


},