title: jQuery Cycle: 1 cycle, multiple pagers
body: <p>Long time reader, first time poster. :)  </p>
  
  <p>I'm using the jQuery Cycle plugin, which can be downloaded here: <a href="http://jquery.malsup.com/cycle/" rel="nofollow">http://jquery.malsup.com/cycle/</a></p>
  
  <p>I got it working fine for the post part but a request has come in to have pager controls above and below the object that cycles.  </p>
  
  <p>It seems that the second pager doesn't get picked up on, either with highlighting the active panels pager link and clicking on the second pager controls just adds the "#" to the url in the address bar.</p>
  
  <p>I saw this post:
  stackoverflow.com/questions/1663974/using-multiple-pagers-in-jquery-cycle-plugin</p>
  
  <p>which kind of makes sense but not sure why it would be any different from mine, the end result of mine can be seen here: <a href="http://dev02.web.lumens.demandware.net/on/demandware.store/Sites-Lumens-Site/default/Search-Show?cgid=brands" rel="nofollow">http://dev02.web.lumens.demandware.net/on/demandware.store/Sites-Lumens-Site/default/Search-Show?cgid=brands</a> if you scroll all the way to the bottom.</p>
  
  <p>The html looks something like this:</p>
  
  <pre><code>    &lt;ul class="pager"&gt;&lt;/ul&gt;
        &lt;div id="list-screens" class="list-screens"&gt;
           &lt;div class="list-view-row"&gt;&lt;!-- content goes here-&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;ul class="pager"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>For the Javascript:</p>
  
  <pre><code>    jQuery(document).ready(function() {
          var markupBegin = '&lt;li&gt;&lt;a href="#"&gt;';
          var markupEnd = "&lt;/a&gt;&lt;/li&gt;";
          var i = 0;
          var pagerArray = ["A - E","F - J", "K - O","P - T","U - Z", "#"];
          var detailPagerArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","${'#'}"];
          jQuery("${'#'}list-screens").children().each(function(index, element) {
          jQuery(".list-view .pager").append(markupBegin + pagerArray[i] + markupEnd);
          //if(i &lt;jQuery("${'#'}list-screens").children().length - 1 ) {
          jQuery(".list-view .pager").append("&lt;li class='divider'&gt;&lt;/li&gt;");
          //}
          i++;
          });
          jQuery(".list-view .pager").append("&lt;li&gt;&lt;a href=\"#\"&gt;See All Brands&lt;/a&gt;");
          jQuery(".list-view .pager").append("&lt;li class='clear'&gt;&lt;/li&gt;");
          // browse listview
  
          jQuery("#list-screens").cycle({
              fx:     'scrollLeft', 
              easing: 'linear', 
              timeout:  0,
              speed: 750,
              width:935,
              height:500,
              pager: ".list-view .pager",
              pagerAnchorBuilder: function(idx, slide) {
              // console.log(idx);
              //for every amount its over 1 we have to add an extra to account for the divider li
  
              if(idx == 0) { // shouldn't have to do anything
              } else {
                  idx = idx + (idx);
              }
              return ".list-view .pager li:eq("+ idx +") a";
          },
          updateActivePagerLink : function(pager, currSlideIndex) {
              if(currSlideIndex != 0) {
                  currSlideIndex = currSlideIndex + currSlideIndex;
              }
              jQuery(pager).find("li").removeClass("activeSlide").filter('li:eq('+currSlideIndex+')').addClass("activeSlide");
          }
      });
  </code></pre>
  
  <p>I could probably try to just capture the clicks and hook into the events of cycle and force it that way but it just seems a little weird that this doesn't work.  I did notice that there is the one option to allow the link clicks to bubble.  Wasn't really sure if thats what I needed.  Thanks for all your help.</p>