Slideshow with thumbnails

Question

You can create thumbnails with jQuery Cycle plugin in WordPress by following the example located HERE

Example:

$('#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>'; 
    } 
});

As you can see in the link provided, the slideshow is in-fact static at the moment but if you’ve been playing with Cycle you’ll also know that you can set the slider to continuous,

continuous: true

See this link for all of the Cycle options at your disposal: OPTIONS

Now with regards to the thumbnails themselves, what I would do (and this is just one way to go about it) is use something like TimThumb to handle the image resizing;

(and yes… a few people will probably jump on here and talk about WordPress’ native image sizing functions in which case you might want to intergrate Kaiser’s plugin located HERE)

Anyhow this is how you would rewrite your image handling in the above snippet;

<img class="your_choice" src="https://wordpress.stackexchange.com/questions/48795/<?php bloginfo("template_directory'); ?>/thumb/thumb.php?src="' + slide.src + '"&amp;h=xxx&amp;w=xxx&amp;zc=1" />

Where thumb/thumb.php is the relative path to your timthumb script (which may be named differently for you) and which is preceded by bloginfo('template_directory'); which will give you the path to your theme + /thumb/thumb.php

Now the only other part you need to mess with is essentially the h=XXX and w=XXX where XXX is equal to your size in pixels that you’d like your thumbnails.

This will set you in the right direction.

Although I haven’t tested that many slideshow plugins I’d say there ought to be one out there that handles variable image sizes for thumbnails.

A plugin that I like for its simplicity is Meteor Slides which is based on the jQuery Cycle plugin – so you can extend it to have thumbnails if you want or you can just as easily go the manual route.

Hope this helps.