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