Vários pagers para várias instâncias do ciclo jQuery na mesma página?

Question

Estou tentando descobrir como posso ter vários pagers associados a várias apresentações de slides do ciclo jQuery que estão na mesma página sem criar manualmente novas classes e um script para fazer referência a eles.

Meu HTML se parece com isso.

<!-- PROJECT -->
        <div title="Challenge Factor" class="project">

          <div class="projectinfo-top">
                <div class="project-title"><h2>Challenge Factor</h2></div>
                <div class="bulletnav"></div>
          </div>

            <div class="minislideshow-bg">
                <div class="minislideshow">
                  <img src="project-slides/challengefactor-1.jpg" width="729" height="425" alt="Challenge Factor" />
                  <img src="project-slides/challengefactor-2.jpg" width="729" height="425" alt="Challenge Factor" />
                  <img src="project-slides/challengefactor-3.jpg" width="729" height="425" alt="Challenge Factor" />
                  <img src="project-slides/challengefactor-4.jpg" width="729" height="425" alt="Challenge Factor" />
                </div>
            </div>

            <div class="projectinfo-text">

                <p>ChallengeFactor.com is a new social network based on user created challenges that push members to better themselves and the lives around them. Webphibian was contacted to develop the social network from scratch and tie it into Challenge Factor's current branding. My role on this project was to design the social network side of the site, redesign their current site, and all front-end development.</p>
            </div><!--/project info text-->

        </div><!--/PROJECT-->

Meu jQuery parece.

$(function() { $('.minislideshow').cycle({ timeout: 0, pager:'.bulletnav' }); }); 

Eu tenho vários projetos listados, cada um tem sua própria apresentação de slides, div.Minislideshow. Eu gostaria que os links do pager entrassem no div.bulletnav para cada instância do projeto.

Qualquer ajuda seria muito apreciada. Se você precisar de mais informações, me avise. Obrigado.

Answer 1

Eu achei isso realmente útil:

http://forum.jquery.com/topic/jquery-cycle-plugin-set-up-multiple-containers-with-same-options

Basicamente, eles estão fazendo um .ach () para cada apresentação de slides e depois passando o internode para os links relevantes, assim:

$('section.portfolioItem .image').each(function(){
    var p = this.parentNode;
    $(this).cycle({
      timeout:  0,
      prev:   $('.prev', p),
      next:   $('.next', p),
      pager:  $('.slideshowNav', p)
    });    
});

Answer 2

Obrigado pelo código. Eu encontrei um código semelhante,

 $('.minislideshow').each(function() {
    var $nav = $('<div class="pager"></div>').insertBefore(this);

    $(this).cycle({
        timeout: 2000,
        pager:   $nav
    });
 }); 

Parece estar fazendo a mesma coisa. Meu problema agora é que as imagens nos slides que não sejam a primeira não aparecem. Os ícones do pager aparecem representando o número de slides em cada contêiner de div, mas não consigo descobrir como obter as imagens para aparecer. Eles parecem funcionar bem no primeiro. Eu posso obter o resultado que estou procurando, se configurar várias div para a apresentação de slides e dar a cada um de uma classe exclusiva e, em seguida, criar JavaScript para cada classe. O código acima ajudou, então não preciso criar manualmente uma nova classe para cada instância, mas as imagens de slide nos outros contêineres ao lado do primeiro não parecem estar aparecendo agora?