Mehrere Pagers für mehrere JQuery Cycle-Instanzen auf derselben Seite?

Question

Im zu versuchen, herauszufinden, wie ich mehrere Funkrufempfänger zugeordnet, um mehrere jquery Zyklus Show haben können, die alle auf der gleichen Seite sind, ohne manuell Erstellen neuer Klassen und ein Skript, sie zu verweisen.

Meine HTML sieht wie folgt aus.

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

Meine JQuery aussieht.

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

Ich habe mehrere Projekte aufgelistet, haben jeweils ihre eigene Slideshow, div.minislideshow. Ich würde die Pager-Links wie in der div.bulletnav für jedes Projekt Instanz zu gehen.

Jede Hilfe wäre sehr geschätzt. Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen. Danke.

Answer 1

Ich fand diese wirklich hilfreich:

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

Im Grunde sie tun eine .each () für jede Diashow und dann Passieren der parentNode in die entsprechenden Links, etwa so:

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

Answer 2

Danke für den Code. Ich fand ein ähnlicher Code,

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

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

Es scheint, das Gleiche zu tun. Mein Problem ist jetzt, dass die Bilder in den Folien andere als die erste zeigen nicht auf. Pager-Symbole angezeigt, die die Anzahl der Folien in jedem div Container, aber ich kann nicht herausfinden, wie die Bilder aufstehen zu zeigen. Sie scheinen zu funktionieren auf den ersten ein. Ich kann das Ergebnis erhalten suche ich, wenn ich jeder eine einzigartige Klasse mehr div für die Diashow und geben einrichten und dann JavaScript für jede Klasse erstellen. Der obige Code half so habe ich nicht manuell eine neue Klasse für jede Instanz erstellen, aber die Dia-Bilder in den anderen Behältern neben dem ersten scheinen nicht jetzt auftauchen werden?