Question

With the jquery cycle plugin, the pagers are expected to be in this sort of format.

<div id='nav'>
     <a href='#'>pager1</a>
     <a href='#'>pager2</a>
     <a href='#'>pager3</a>
     <a href='#'>pager4</a>
</div>

The thing that I don’t like is using anchor links for things that aren’t actually links… so I set up a custom pager creation function which essentially ends up looking something like …

<div id="nav">
    <span class='pager'>Pager1</span>
    <span class='pager'>Pager2</span>
    <span class='pager'>Pager3</span>
    <span class='pager'>Pager4</span>
</div>

The problem ends up being that the spans aren’t clickable. So I’m wondering if there’s an easily accessible way to have the spans be interactive just like the a’s.

Answer 1

Whoops, turns out it does work.

$('#slideshow').cycle({
        fx:     'fade', 
        timeout: 5000, 
        pager:  '#nav',
        pagerEvent: 'click',
        pagerAnchorBuilder: function (index) {
            //alert(text);
            return '#nav span:eq('+ index+')'; 
        }
    });