Image display that will change for every 5 sec.

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Faree

    Image display that will change for every 5 sec.

    Hi all,

    can any one come up with the code that display the images from the
    folder.but image should be changed for every 5 seconds.can any one com
    with this code. or suggest me the way to do it.quick reply will be
    appreciated.

    thanks in Advance.

  • Erwin Moller

    #2
    Re: Image display that will change for every 5 sec.

    Faree wrote:
    [color=blue]
    > Hi all,
    >
    > can any one come up with the code that display the images from the
    > folder.but image should be changed for every 5 seconds.can any one com
    > with this code. or suggest me the way to do it.quick reply will be
    > appreciated.
    >
    > thanks in Advance.[/color]

    Hi,

    I think the most simple approach is a combination with Javascript and PHP.
    Try something like this:
    1) scan your directory with images
    2) produce html that contains the javascript to loop over the images.

    You'll end up with something like this:
    (not tested, just some code to get you going)

    <html>
    <head>
    <script type="text/javascript">

    // fill the array imagenames from PHP
    // by scanning the filenames in the directory.
    // Have a look at: http://nl2.php.net/manual/en/function.readdir.php
    // for some examplecode

    var imagenames = ["mrJoe.jpg" , "ZaphodBreebleb rox.gif", "Marvin.png "];
    var baseImageURL = "http://www.yoursite.co m/images/";
    var imgcount = -1;
    var nrOfImages = imagenames.leng th;
    nextimage();

    function nextImage(){
    imgcount++;
    if(imgcount > nrOfImages) {
    imgcount = 0;
    }
    // make full URL to image
    var newImageSrc = baseImageURL + imagenames[imgcount];
    // set the new Image
    document.images .myImage.src=ne wImageSrc;
    // Come back here in 5 seconds
    setTimeout("nex tImage()" , 5000);
    }
    </script>

    </head>
    <body>
    <img scr="" name="myImage">
    </body>
    </html>



    Good luck.

    Regards,
    Erwin Moller

    Comment

    Working...