jQuery Cycle - add thumbnails to pager version

Question

I am using the jQuery Cycle plugin with pagination found here (about half way down the page).

Currently, all my pagination looks like simple 1, 2, 3, 4 a tags, as per the example. However, I want to make these thumbnail images instead.

It looks like the nav div is created by the plugin script itself, so if I build my own list of thumbnails and specify them as the nav elements, the plugin just appends its own pagination to that div.

Would anyone know the correct way to modify this plugin to allow image thumbnails?

My code:

$('#frontimageswap') 
  .before('<div id="nav">') 
  .cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 5000, 
    pager:  '#nav' 

});

OptimusCrime OptimusCrime · Accepted Answer · 2013-05-28T00:58:51

Great to finally see someone else using this awesome plugin instead of jCarusel! What you want to do is explained in this demo.

The code is more or less something like this:

$('#slideshow').before('<ul id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav', 

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
});

It uses the function pageAnchorBuilder that runs once for every item in the cycle. Here you have access to the current slide and idx. You are not saying anything about your markup or how the thumbnails are made, but this should get you started.

Note: I have not changed the settings to match yours.

jQuery Cycle - add thumbnails to pager version

1 Answers