title: jQuery cycle pager
body: <p>I got this pager working: <a href="http://jquery.malsup.com/cycle/pager6.html" rel="nofollow">http://jquery.malsup.com/cycle/pager6.html</a>
  But what if i have multiple slideshows on 1 page and i don't want to use an ID for the pager.
  But use the nearest element with class X as pager.</p>
  
  <p>Can this be done?</p>
  
  <p>This is my current code:</p>
  
  <pre><code>$(document).ready(function()
  {
      $('.photoGallerySlideshowAlbum').cycle(
      {
          fx: 'fade',
          pager: '#photoGallerySlideshowPager',
          activePagerClass: 'selected',
          pagerAnchorBuilder: function(idx, slide)
          { 
              return '#photoGallerySlideshowPager li:eq(' + idx + ') a';
          },
          after: function(currentImage, nextImage, options)
          {
              var captions = $(this).parent().parent().find('.photoGallerySlideshowCaptions').children().hide();
              var caption = $(captions[options.currSlide]);
              caption.show();
          }
      });
  });
  </code></pre>
  
  <p>I did it now like this:</p>
  
  <pre><code>$(document).ready(function()
  {
      $('.photoGallerySlideshowAlbum').each(function(index, value)
      {
          var elPager = $(this).parent().find('.photoGallerySlideshowPager');
  
          $($(this)).cycle(
          {
              fx: 'fade',
              pager: elPager,
              activePagerClass: 'selected',
              pagerAnchorBuilder: function(idx, slide)
              { 
                  return 'li:eq(' + idx + ') a';
              },
              after: function(currentImage, nextImage, options)
              {
                  var captions = $(this).parent().parent().find('.photoGallerySlideshowCaptions').children().hide();
                  var caption = $(captions[options.currSlide]);
                  caption.show();
              }
          });
      }); 
  });
  </code></pre>
  
  <p>But i don't know how to change the pagerAnchorBuilder.
  My html looks like this (can not be changed).</p>
  
  <pre><code>&lt;div class="photoGallerySlideshowPager"&gt;
                      &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;a&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;c&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  </code></pre>