$(document).ready(function() {
    	$('#slideshow') 
	.cycle({ 
	    fx:     'fade', 
	    speed:  'slow', 
	    timeout: 10000, 
		prev: '#previous',
		next: '#next',
	    pager:  '#gallery-nav',
	    pagerAnchorBuilder: function(idx, slide) { 
	    	//get the src of the img -> swap large image src for small image src for the thumbnail
		var temp = slide.src;
		temp = temp.replace("/picture/", "/thumb/");
		return '<li><a href="#"><img src="' + temp + '" width="20" height="20" alt="'+slide.alt+'"></a></li>'; 
	    },
	    before: function(zeroBasedSlideIndex, slideElement) { 
		$('#gallery-caption').html(slideElement.alt);
	    } 
	});
});