Page 1 of 1

4 rotating images on one page

Posted: Sun Jun 27, 2010 9:16 am
by kyleiwaniec
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).

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>
 
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.

Re: 4 rotating images on one page

Posted: Sun Jun 27, 2010 10:56 am
by greyhoundcode
Might be better to ask about crossfades etc in the JS area of the forum. That said, take a look at this JQuery plugin which can take care of crossfades and a lot more besides.