Question

Long time reader, first time poster. 🙂

I’m using the jQuery Cycle plugin, which can be downloaded here: http://jquery.malsup.com/cycle/

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.

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.

I saw this post:
stackoverflow.com/questions/1663974/using-multiple-pagers-in-jquery-cycle-plugin

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: http://dev02.web.lumens.demandware.net/on/demandware.store/Sites-Lumens-Site/default/Search-Show?cgid=brands if you scroll all the way to the bottom.

The html looks something like this:

    <ul class="pager"></ul>
      <div id="list-screens" class="list-screens">
         <div class="list-view-row"><!-- content goes here-></div>
    </div>
    <ul class="pager"></ul>

For the Javascript:

    jQuery(document).ready(function() {
        var markupBegin = '<li><a href="#">';
        var markupEnd = "</a></li>";
        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 <jQuery("${'#'}list-screens").children().length - 1 ) {
        jQuery(".list-view .pager").append("<li class='divider'></li>");
        //}
        i++;
        });
        jQuery(".list-view .pager").append("<li><a href=\"#\">See All Brands</a>");
        jQuery(".list-view .pager").append("<li class='clear'></li>");
        // 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");
        }
    });

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.

Answer 1

you can always fall back on the manual pager creation and click handling

an example could be found here:

http://jquery.malsup.com/cycle/goto2.html

this creates 1 pager, but you can create many just like it in a second buttonContainer

var bc = $('#buttonContainer'); 

var $container = $('#container').cycle({ 
    fx:     'scrollHorz', 
    speed:   300, 
    timeout: 0 
}); 

$container.children().each(function(i) { 
    // create input 
    $('<input type="button" value="'+(i+1)+'" />') 
        // append it to button container 
        .appendTo(bc) 
        // bind click handler 
        .click(function() { 
            // cycle to the corresponding slide 
            $container.cycle(i); 
            return false; 
        }); 
});