Slideshow with thumbnails

Question

I have a simple demo here to illustrate my problem.

http://www.ttmt.org.uk/wordpress/

It's a slideshow of images that is using the cycle plugin - http://jquery.malsup.com/cycle/

The images are added directly to the content of the page and the div containing the content is passed to the cycle function.

My problem is I would like to have thumbnails of the images underneath.

I have seen a few WordPress plugins that do this but they ALL need the images to be the same dimensions for it to work.

My images have the same height but the width are different.

Is there a plugin thats can do this with images that are different widths.

If not can anyone recommend how I might do this.

I really hope this is at least possible - it seems so simple but i can't find a solution anywhere.

Answer 1

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="<?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.