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

Question

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

My Jquery выглядит.

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

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

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

Answer 1

Я нашел это очень полезно:

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) 
    });  
}); 

Answer 2

Спасибо за код. Я нашел аналогичный код,

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

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

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