메인 이미지 아래에 축소판 그림이있는 JQuery Cycle 플러그인 - 호출기

Question

jQueryCycle 플러그인을 사용하여 기본 이미지 아래에 축소판이있는 호출기를 가져오고 있습니다. 이것은 내가 일하는 튜토리얼입니다. http://digitalunion.osu.edu/2011/10/18/jquery-cycle-plugin-a-little-tutorial/

은 아래에있는 내 jQuery 코드 내가 위에서 붙여 넣기, 예 링크에서와 같이 나는 동일한 출력을 얻고 여기에

$(document).ready(init); 

function init() { 
// dynamically add a div to hold the slideshow's pager 
$(".bison_images").before('<div class="pager"></div>'); 

// now to use the cycle plugin 
$(".bison_images").cycle({ 
    pause: 1, 
    pager: ".pager", 
    pagerAnchorBuilder: imagePager 
}); 
} 

    function imagePager(index, slide) { 
var slide = jQuery(slide); 
var img = slide.children("img").get(0); 
return '<a href="#"><img src="' + img.src + '" width="110" height="66" /></a>'; 
} 

일하고있다. 하지만 호출기를 주 이미지 아래에 놓고 싶습니다. 다음 명령으로 시도했지만 성공하지 못했습니다.

$(".bison_images").after('<div class="pager"></div>'); 

누구나 해결책을 제안 할 수 있습니까? 이 작품

케쉬

Answer 1

enter code here 

확인 ...

$('.bison_images').after('<div class="pager">').cycle({ 
      fx:  'scrollHorz', 
      speed: 'slow', 
      timeout: 9000, 
      pager: '.pager', 
      pagerAnchorBuilder: function(idx, slide) { 
    var slide = jQuery(slide); 
    var img = slide.children("img").get(0); 
    return '<a href="#"><img src="' + img.src + '" width="110" height="66" /></a>'; 
} 
     });