Multiple Pagers for Multiple Jquery Cycle Instances on same page?

Question

Im trying to figure out how I can have multiple pagers associated to multiple jquery cycle slideshows that are all on the same page without manually creating new classes and a script to reference them.

My HTML looks like this.

<!-- 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 looks like.

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

I have multiple projects listed, each have their own slideshow, div.minislideshow. I would like the pager links to go inside the div.bulletnav for each project instance.

Any help would be greatly appreciated. If you need more info, let me know. Thanks.

Answer 1

I found this really helpful:

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

Basically they're doing a .each() for each slideshow and then passing the parentNode into the relevant links, like so:

$('section.portfolioItem .image').each(function(){
    var p = this.parentNode;
    $(this).cycle({
      timeout:  0,
      prev:   $('.prev', p),
      next:   $('.next', p),
      pager:  $('.slideshowNav', p)
    });    
});

Answer 2

Thanks for the code. I found a similar code,

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

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

});

It seems to be doing the same thing. My problem now is that images in the slides other than the first one do not show up. Pager icons show up representing the number of slides in each div container, yet I cant figure out how to get the images to show up. They seem to work fine on the 1st one. I can get the result Im looking for, if I set up multiple divs for the slide show and give each one a unqiue class and then create javscript for each class. The code above helped so I dont have to manually create a new class for each instance, yet the slide images in the other containers beside the first one don't seem to be showing up now?