Problem: Jquery Cycle - Image + Description rotator /w custom thumbnails

Question

I'm attempting to build a custom Image + Description rotator /w custom thumbnails using Jquery Cycle.

Something kind of like this example: http://www.malsup.com/jquery/cycle/pager2.html, but using DIV (instead of images) and custom thumbnails from an alternate directory.

From what I can understand this is how I'd build the sample above using DIVS:

$('#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) {
                        var src = $('img',slide).attr('src');
                        return '<li><a href="#"><img src="' + src + '" width="100" height="50" /></a></li>';
                }
});

How do I parse/modify 'src' or just pull the file-name rather than the directory?

This doesn't work but it sort of what I want to do....

pagerAnchorBuilder: function(idx, slide) {
                        var src = $('img',slide).attr('src');
var thumbdir = 'static/images/thumbs/';
                        return '<li><a href="#"><img src="' thumbdir + src + '" width="100" height="50" /></a></li>';
                }

Basically... If the image src directory for large images in $slideshow is static/images/full/ how do I pullthumbnails from static/images/thumbs/ (the file names will be identical) using the pagerAnchorBuilder ?

Answer 1

take a look at my code... here LINK WORK NOW