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

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

Мой 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. Я хотел бы, чтобы ссылки на пейджер входили в div.bulletnav для каждого экземпляра проекта.

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


jquery pager jquery-cycle
person hybrid    schedule 17.05.2010    source источник

Ответы (2)


arrow_upward
13
arrow_downward

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

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

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

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

arrow_upward
3
arrow_downward

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

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

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

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

person hybrid    schedule 18.05.2010
comment
Я использовал это также для предыдущего и следующего контроля. Он отлично работает! Спасибо! - person Adrian Florescu; 06.02.2012