Jquery Cycle Plugin 질문

Question

Jquery 용 Cycle Plugin을 성공적으로 설치했으며 원하는 방식으로 배너를 순환 시켰습니다. 제 질문은 앵커를 만드는 것입니다. http://www.bazaarvoice.com과 비슷한 것을 만들려고합니다.

앵커가 자바 스크립트에서 생성되는 것처럼 보이지만 잘못 될 수 있습니다. 여기 내 HTML과 자바 스크립트입니다. 그것은 pagerAnchorBuilder에 있지만 확실하지 않은 것처럼

는 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> 

자바 스크립트

$("#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 
}); 

보인다. 당신이 시작 앵커 태그 바로 <li>하고 있어야 <img> 사이

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>'; 
}, 

누락처럼

Answer 1

보인다. 당신은 이미 거기에 끝 tage을 가지고있는 것 같습니다. 슬라이드의 ID를 기반으로 링크를 변경하려는 경우, 당신은 같은 것을 할 수 있습니다

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>'; 
}, 

:

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>'; 
    } 


},