4 rotating images on one page

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
kyleiwaniec
Forum Newbie
Posts: 14
Joined: Tue Jun 22, 2010 2:21 pm

4 rotating images on one page

Post 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.
User avatar
greyhoundcode
Forum Regular
Posts: 613
Joined: Mon Feb 11, 2008 4:22 am

Re: 4 rotating images on one page

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