在同一頁上多個Jquery循環實例的多個尋呼機？

Question

我試圖找出如何可以有多個分頁器關聯到多個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。

任何幫助將不勝感激。如果您需要更多信息，請告訴我。謝謝。

Answer 1

我發現這真的很有幫助：

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

基本上他們正在做的每一個幻燈片。每一個（），然後使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 
    }); 
}); 

這似乎是在做同樣的事情。我現在的問題是，第一張幻燈片以外的幻燈片沒有出現。傳呼機圖標顯示代表每個div容器中幻燈片的數量，但我無法弄清楚如何讓圖像顯示出來。他們似乎在第一個上工作得很好。我可以得到我期待的結果，如果我爲幻燈片放映設置了多個div，併爲每個幻燈片分配一個獨特的類，然後爲每個類創建JavaScript。上面的代碼有助於我不必爲每個實例手動創建一個新類，但是第一個旁邊的其他容器中的幻燈片圖像現在似乎並沒有顯示出來？