dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: Easiest way to get images to cycle through every 10 seconds

  1. #1
    Join Date
    Jul 2006
    Posts
    6

    Question Easiest way to get images to cycle through every 10 seconds

    I need to get multiple images show on one page and I had thought about just having them cycle through and a new one would appear every ten seconds or so. I don't really know what the best approach would be be but hopefully someone else has an idea. Maybe some java? When I keep searching all i get are biking pictures. Thanks for the help in advance.

    MTR

  2. #2
    Join Date
    Jun 2006
    Posts
    263
    what server script are you using?

  3. #3
    Join Date
    Jul 2006
    Posts
    6
    you mean apache?

  4. #4
    Join Date
    Jul 2006
    Posts
    6
    A friend of mine reccomended using a javascript counter to change the css background image. Unfortunately my javescript knowledge is minimal. Anyone have and easy way to approach this or possibly explain this better to me. Thanks

  5. #5
    Join Date
    Jun 2006
    Posts
    263
    create an include PHP page with:
    HTML Code:
    <?php 
    $images=array( // list of files to rotate - add as needed 
     "img1.gif", 
     "img2.gif", 
     "img3.gif", 
     "img4.gif", 
     "img5.gif" ); 
    $total=count($images); 
    $secondsFixed=10; // seconds to keep list the same 
    $seedValue=(int)(time()/$secondsFixed); 
    srand($seedValue);  
    $index=(int)($_GET['i']); // image index passed in 
    $i=$index%$total; // make sure index always in bounds 
    $file=$images[$i]; 
    header("Location: $file"); // and pass file reference back 
    ?>
    And then in your HTML page:
    HTML Code:
    <img src='mysite.com/rotate.php?i=0'>image #1 
    <img src='mysite.com/rotate.php?i=1'>image #2 
    <img src='mysite.com/rotate.php?i=2'>image #3
    <img src='mysite.com/rotate.php?i=3'>image #4
    <img src='mysite.com/rotate.php?i=4'>image #5
    Last edited by dthurman1432; 07-07-2006 at 05:27 PM.

  6. #6
    Join Date
    Jul 2006
    Posts
    6
    So in your example the php page would be rotate.php? Thanks for the help by the way, much appreciated.

  7. #7
    Join Date
    Jul 2006
    Posts
    6
    And also how would you edit the php to get it to run through the same order each time?

  8. #8
    Join Date
    Jun 2006
    Posts
    263
    I edited the code above and took out the random. And you can obviously name the PHP file anything you want, just make sure that it's identical in the img tag.

  9. #9
    Join Date
    Jul 2006
    Posts
    6
    Thanks a lot I will let you know how it works come monday.

  10. #10
    Join Date
    Jul 2006
    Posts
    1

    follow-up question

    Hi dthurman,

    I've so far made one attempt to implement the code you listed to have several images randomly cycle through on a page, but I'm apparently doing something wrong.

    I have my random.php page set up exactly as you stated, with the exception of changing image filenames. In the html code on the main page that will be viewed, I also used the img tags just how you suggested, but it's not working. Instead of cycling through three images, it just shows three boxes where images couldn't be loaded, right next to each other.

    Any advice on something I'm missing?

    Thanks,
    Jeremy

  11. #11
    Join Date
    Jun 2006
    Posts
    263
    Try this instead:

    HTML Code:
    <?php
    /*
     * Name your images 1.jpg, 2.jpg etc.
     *
     * Add this line to your page where you want the images to 
     * appear: <?php include "randomimage.php"; ?> */ 
    // Change this to the total number of images in the folder
    $total = "11";
    // Change to the type of files to use eg. .jpg or .gif$
    file_type = ".jpg";
    // Change to the location of the folder containing the images
    $image_folder = "images/random";
    // You do not need to edit below this line
    $start = "1";
    $random = mt_rand($start, $total);
    $image_name = $random . $file_type;
    echo "<img src=\"$image_folder/
    $image_name\" alt=\"$image_name\" />";
    ?>
    Or:

    HTML Code:
    <?php
    $dir=opendir("/home/you/public_html/folder/");
    //This is the directory route to the folder
    $directory="";
    //This is a relative link to the directory if it is not in the same directory as the file you are displaying the images on
    
    $pattern="\.(gif|jpg|jpeg|png|bmp|swf)$";
    if(!$dir)
    {
    die("Failed to read directory");
    }
    $s=readdir($dir);
    $count="0";
    $image;
    while($s)
    {
    if(ereg($pattern, $s))
    {
    $image[$count]=$s;
    $count++;
    }
    $s=readdir($dir);
    }
    closedir($dir);
    
    //Spit it out
    $limit=count($image);
    $limit--;
    $randNum=rand(0,$limit);
    $size=getimagesize("$directory$image[$randNum]");
    echo "<br><img src=\"$directory$image[$randNum]\" $size[3]>";
    ?>
    Last edited by dthurman1432; 07-19-2006 at 05:54 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles