4 rotating images on one page
Posted: Sun Jun 27, 2010 9:16 am
I am displaying 4 images on my page from a directory (there are many more in the directory). I would like to rotate all of the images in the directory (preferably randomly but not necessarily as long as they don't display the same images at the same time), within the four boxes.
http://mercercountyrealtors.com/preview ... ndex4.php
Ideally, they would have a crossfade effect, but I haven't gotten there yet.
Right now this is the code I have, which I've stitched together, and it's not really working (actually, just plain not working).
Many thanks in advance.
If you have an idea as to how to make the crossfade, let me know and I'll post a separate question, thanks.
http://mercercountyrealtors.com/preview ... ndex4.php
Ideally, they would have a crossfade effect, but I haven't gotten there yet.
Right now this is the code I have, which I've stitched together, and it's not really working (actually, just plain not working).
Code: Select all
<?php
foreach (glob('featured_images/*.*') as $filename) {
$file[filemtime($filename)] = $filename;
}
krsort($file);
for ($i=0; $i<=3; $i++) {
//get they key
current($file);
$num=$file[key($file)];
//set target path for image
$path = "featured" . $i . ".php";
//print $num."<br />";
echo '<li><a href='.$path.'><img id="slideshow" style="width:180px; height:140px; padding: 3px; margin:5px; border: 1px solid #ccc;" src="'.$num.'" ></a></li>';
next($file);
}
?>
<script language="javascript" type="text/javascript">
var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "featured_images/"+[curimg])
curimg=(curimg<$file.lenght-1)? curimg+1 : 0
}
window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>
If you have an idea as to how to make the crossfade, let me know and I'll post a separate question, thanks.