Pagers multiple per più istanze Jquery Cycle sulla stessa pagina?

Question

Nel tentativo di capire come posso avere più cercapersone associati a più presentazioni ciclo jquery che sono tutti sulla stessa pagina senza creare manualmente nuove classi e uno script per fare riferimento a loro.

Il mio aspetto HTML come questo.

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

Il mio Jquery assomiglia.

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

ho più progetti elencati, hanno ciascuno il proprio presentazione, div.minislideshow. Vorrei i link cercapersone andare all'interno del div.bulletnav per ogni istanza progetto.

Qualsiasi aiuto sarebbe molto apprezzato. Se avete bisogno di ulteriori informazioni, fatemelo sapere. Grazie.

Answer 1

Ho trovato questo veramente utile:

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

In pratica stanno facendo un .each () per ogni presentazione e poi passando il parentNode nei collegamenti relativi, in questo modo:

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

Answer 2

Grazie per il codice. Ho trovato un codice simile,

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

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

E sembra stia facendo la stessa cosa. Il mio problema ora è che le immagini nelle diapositive altri rispetto al primo non si presentano. Icone Pager rivelano che rappresenta il numero di diapositive in ogni contenitore div, ma io riesco a capire come ottenere le immagini di presentarsi. Essi sembrano funzionare bene il 1 ° uno. Posso ottenere il risultato che sto cercando, se ho creato div multiplo per la presentazione e dare a ciascuno una classe unica e quindi creare JavaScript per ogni classe. Il codice di cui sopra aiutato così non devo creare manualmente una nuova classe per ogni istanza, ma le immagini di diapositive negli altri contenitori accanto al primo non sembrano mostrare ora?