Update jQuery Cycle Pager onLoad

Question

I'm trying build a pager div that shows a subset of numbered slide links for a project where each gallery has a large number of slides (30+). For example, I'd just like to show the links for slides 1-8 initially, with a button for 'next' to go forward.

Here is a jsFiddle that illustrates my issue: http://jsfiddle.net/elihubogan/k2ZK3/

Everything works except for the initial gallery load, and I can't figure out how to pass the proper variables/options into the 'onAfterPager' function to run the function on the initial load.

Any ideas?

HTML:

<div id="banner">
    <img src="http://placehold.it/350x150" alt="Image A" title="This is Image 1" />
    <img src="http://placehold.it/350x150" alt="Image B" title="This is Image 2" />
    <img src="http://placehold.it/350x150" alt="Image C" title="This is Image 3" />
    <img src="http://placehold.it/350x150" alt="Image D" title="This is Image 4" />
    <img src="http://placehold.it/350x150" alt="Image E" title="This is Image 5" />
</div>
<div id="caption"></div>
<button id="previous">Previous</button>
<button id="next">Next</button><br />

Only want to show 3 links at a time...<br />
Notice that clicking 'Next' above triggers the proper formatting
<div id="pager"></div>

JS:

$(document).ready(function () {

    function onAfterPager(curr, next, opts) {
        // update caption
        $('#caption').html(this.title);

        // check index, remove 'prev' link if on first slide, 
        // remove 'next' link if on last slide

        var index = opts.currSlide;
        $('#prev')[index === 0 ? 'hide' : 'show']();
        $('#next')[index === opts.slideCount - 1 ? 'hide' : 'show']();

        // reset pager numbers if necessary
        $('#pager a').hide();

        // set links per page (3 in this example)
        var $lpp = 3;
        var $cur = index + 1;
        var $tot = opts.slideCount;
        var $batch = $lpp - Math.round($lpp / 2);

        // if current page plus $batch is less than the total slidecount
        // then we're not near the end
        if ($cur + $batch <= $tot) {
            $rs = $batch;

            // conversely, we can test if we're near the beginning
            if ($cur - $batch >= (2 - $batch)) {
                for (i = 1; i <= $batch; i++) {
                    if ($cur - i > 0) $('#pager a').eq(($cur - i) - 1).show();
                    else $rs += 1;
                }

                // if we're near the beginning
            } else {
                $('#pager a').eq($cur - 1).show();
                $rs += $batch;
            }
            $('#pager a').eq($cur - 1).show();
            for (i = 1; i <= $rs; i++)
            $('#pager a').eq(($cur + i) - 1).show();

            // if we're near the end
        } else {
            $rs = $batch;
            if ($cur + $batch <= ($tot + ($batch - 1))) {
                for (i = 1; i <= $batch; i++) {
                    if ($cur + i <= $tot) $('#pager a').eq(($cur + i) - 1).show();
                    else $rs += 1;
                }
            } else {
                $('#pager a').eq($cur - 1).show();
                $rs += $batch;
            }
            $('#pager a').eq($cur - 1).show();
            for (i = 1; i <= $rs; i++)
            $('#pager a').eq(($cur - i) - 1).show();
        }
    }

    $('#banner').cycle({
        fx: 'fade',
        speed: 500,
        timeout: 5000,
        next: '#next',
        prev: '#previous',
        pause: 1,
        after: onAfterPager,
        //after: onAfter,
        pager: '#pager'
    });
});

Answer 1

The problem here is that the pager hasn't been created yet when the onPagerAfter function is called for the first time. You can see this by doing console.log($('#pager a')) within the function. For index zero, jQuery can't find the pager elements (the object returned has length zero, ie: no matches found). This could be considered a bug with Cycle the library.

As a workaround, you can use the pagerAnchorBuilder option to provide a function that runs for each anchor as they are constructed, and you can show/hide them individually as you see fit. See my update to your jsFiddle: http://jsfiddle.net/k2ZK3/2/

Hope this helps!