{* note that the thumbs are shown in stead of the original images, just to make sure all images are of the same size due to the crop image-resize option *}
<div id="slides">
{foreach from=$images item=image}
	{if !$image->isdir}
		<img src="{$image->thumb}" alt="{$image->titlename}" />
	{/if}
{/foreach}
</div>
<div id="caption">&nbsp;</div>


{*----------/* height and width should be the same as the thumbnail sizes */
#slides {
  width: 300px;
  height: 120px;
}{*----------<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="modules/Gallery/templates/cycle/jquery.cycle.lite.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('#slides').cycle({ 
		delay:  2000, 
		speed: 500,
		before: onBefore
	});

	function onBefore() {
		$('#caption').html(this.alt);
	};
});
</script>
*}