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

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

1 голос
/ 17 мая 2010

Я пытаюсь выяснить, как можно связать несколько пейджеров с несколькими слайд-шоу цикла 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 для каждого экземпляра проекта.

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

Ответы [ 2 ]

13 голосов
/ 18 мая 2010

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

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)
    });    
});
3 голосов
/ 18 мая 2010

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

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

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

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

...