[snippet] SmoothSlideshow with scriptaculous or MooFx

<?php
$limit=isset($limit)?$limit:40; // max how many pics to work with
$display=isset($display)?$display:10; //the number of pics to display
$random=isset($random)?$random:1;  //randomize pics
$waittime=isset($waittime)?$waittime:7000; //the number of milliseconds between swaps
$fade=isset($fade)?$fade:1000; //the number of milliseconds for disappear
$appear=isset($appear)?$appear:700; //the number of milliseconds for appear
$path_to_galleries=$modx->config['site_url']."assets/galleries/";


$fadeoulous=$fade/1000;
$appearlous=$appear/1000;
$html= '<div id="crossfade-container" style="text-align:center;">';
$scriptTab= "var divs_to_fade = new Array (";

$table = $modx->getFullTableName("maxigallery");
$rs = $modx->db->select("*", $table, "gal_id > '1'", "date DESC", "$limit");
$pics = array();
while ($row = $modx->db->getRow($rs)) {
	 array_push($pics, $row);

}
//print_r($pics);
//if ($random ) {
srand((float)microtime()*1000000);
shuffle ($pics);
//}

for ($i=0; $i<=$display;$i++) {
//$pic=$pics[$i];
$j=$i+1;
	$img_url=$path_to_galleries .$pics[$i]['gal_id']."/tn_". $pics[$i]['filename'];
	 $scriptTab.="'box-{$j}',";
	$attr=($j==1)?'class="fade-box"':'class="fade-box" style="opacity:0;"';
//	$attr=($j==1)?'class="fade-box"':'class="fade-box" ';
$html.="\n";
$href=$modx->makeurl($pics[$i]['gal_id']);
    $html.= <<<END
<div id="box-$j" $attr >
	<a href="$href" title="{$pics[$i]['title']}" ><img src ="$img_url" alt="{$pics[$i]['title']}" /></a>
</div>

END;
}
$scriptTab= preg_replace('/,$/',');',$scriptTab);
$html.="\n</div>";
echo $html;
$script=<<<END
<style>
#crossfade-container {
	margin: 0;
	width: 150px;
	height: 150px;
	}
.fade-box {
	margin-left: 0px;
	position: absolute;
	top: 163;/* I know ;) */
	width: 150px;
	height: 150px;	
}
</style>
<script language="javascript">
	// code from : http://mikeomatic.net/?p=78
	// this array consists of the id attributes of the divs we wish to alternate between
        $scriptTab	
	// the starting index in the above array.  It should be set to the value of the div which doesn't have the CSS Display property set to "none"
	var i = 0;
	var wait = $waittime ; 	// the number of milliseconds between swaps.  
	function swapFade() {  	// the function that performs the fade

//Effect.Fade(divs_to_fade[i], { duration:$fadeoulous, from:1.0, to:0.0 }); // for scriptaculous
var myFx = new Fx.Style(divs_to_fade[i], 'opacity',   {duration: $fade, transition: Fx.Transitions.linear}).custom(1,0); // for moofx
		i++;
		if (i == $j) i = 0;
var myFx2 = new Fx.Style(divs_to_fade[i], 'opacity',   {duration: $appear, transition: Fx.Transitions.linear}).custom(0,0.99); // for moofx
//Effect.Appear(divs_to_fade[i], { duration:$appearlous, from:0.0, to:1.0 });// for scriptaculous
	}
	
	// the onload event handler that starts the fading.
	function startPage() {
		setInterval('swapFade()',wait);
	}

	</script>
END;
$modx->regClientStartupScript($script);


?>