Несколько пейджеров для нескольких экземпляров цикла JQuery на той же странице?

Question

Я пытаюсь выяснить, как у меня может быть несколько пейджеров, связанных с несколькими слайд-шоу JQuery Cycle, которые находятся на одной странице, не вручную создавая новые классы и скрипт для его ссылки.

Мой HTML выглядит так.

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

Мой jquery выглядит как.

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

У меня есть несколько перечисленных проектов, у каждого есть своя слайд-шоу, Div.minislideshow. Я хотел бы, чтобы Pager Links выйдут в Div.bulletnav для каждого экземпляра проекта.

Любая помощь будет очень ценится. Если вам нужна дополнительная информация, дайте мне знать. Спасибо.

Answer 1

Я нашел это действительно полезно:

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

В основном они делают .each () для каждого слайд-шоу, а затем передают партиренную работу в соответствующие ссылки, такие как:

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

Answer 2

Спасибо за код. Я нашел похожий код,

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

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

Кажется, это делает то же самое. Моя проблема сейчас заключается в том, что изображения в слайдах, кроме первого, не появляются. Значки пейджеров показывают, что представляет количество слайдов в каждом контейнере Div, но я не могу выяснить, как получить изображения, чтобы появиться. Кажется, они работают нормально на 1-й. Я могу получить результат, который я ищу, если я настрою несколько Div для слайд-шоу и дайте каждому одному уникальному классу, а затем создать JavaScript для каждого класса. Код выше помогал, поэтому мне не нужно вручную создавать новый класс для каждого экземпляра, но слайдные изображения в других контейнерах рядом с первым, кажется, сейчас не появляются?