Múltiples localizadores para varias instancias jQuery Cycle en la misma página?

Question

Im tratando de averiguar cómo puedo tener múltiples localizadores asociados a múltiples presentaciones del ciclo de jQuery que están todos en la misma página sin crear manualmente nuevas clases y un script para hacer referencia a ellos.

Mi apariencia HTML como éste.

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

Mi Jquery se parece.

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

He enumerado varios proyectos, cada uno tiene su propia presentación de diapositivas, div.minislideshow. Me gustaría que los enlaces de buscapersonas a ir dentro de la div.bulletnav para cada instancia del proyecto.

Cualquier ayuda sería muy apreciada. Si necesita más información, hágamelo saber. Gracias.

Answer 1

He encontrado esto realmente útiles:

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

Básicamente están haciendo un each () para cada presentación y luego pasar el parentNode en los enlaces pertinentes, así:

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

Answer 2

Gracias por el código. Me encontré con un código similar,

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

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

Parece estar haciendo lo mismo. Mi problema ahora es que las imágenes en las diapositivas que no sea el primero de ellos no aparecen. buscapersonas iconos aparecen representa el número de diapositivas en cada contenedor div, sin embargo, yo no puedo encontrar la manera de obtener las imágenes aparezcan. Parece que funcionan bien en la primera uno. Puedo conseguir el resultado que estoy buscando, si configura varias div para la presentación y dar a cada uno una única clase y luego crear JavaScript para cada clase. El código anterior ayudado por lo que no tenga que crear manualmente una nueva clase para cada instancia, sin embargo, no parecen las imágenes de diapositiva en los otros contenedores junto a la primera que se muestra hasta ahora?