Thursday, 14 November 2013

Every 3 Second change image From Directory

<?php
// PHP section

// set some variables
// Image directory! fill in! relative to root

//http://localhost/time/
//slides  stored images

$imageDir = '/time/slides/'; 
define('SERVERPATH', $_SERVER['DOCUMENT_ROOT'].$imageDir);
define('HTTPPATH', 'http://'.$_SERVER['HTTP_HOST'].$imageDir);
// read the names of images from the image directory

$files=array('1.jpg','2.jpg');

$dir = opendir(SERVERPATH);
$javascriptArray = null;
$i = null;
foreach($files as $imagevalue)
{
   if (eregi('\.(gif|png|jpg)$',$imagevalue)){
  $javascriptArray .= $i.'"'.HTTPPATH.$imagevalue.'"'; 
       $i = ',';
    }
}

closedir($dir);

// Html section
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <title>Rotate Images</title>
        <script type="text/javascript">
            rotatingImages = new Array(<?php echo $javascriptArray; ?>);
            imageCount = rotatingImages.length;
            firstTime = true;
            duration = "3"; //seconds
        
            function rotateImage(){
                // Cycle through images sequencially starting with a random image
                // Do not update the image if loading is not yet completed
                if (document.getElementById('rotatingImage').complete || firstTime){
                    if (firstTime) {
                        thisImage = Math.floor((Math.random() * imageCount))
                        firstTime = false
                    }else{
                        thisImage++
                        if (thisImage == imageCount) {
                            thisImage = 0
                        }
                    }
                    document.getElementById('rotatingImage').src = rotatingImages[thisImage]
                    setTimeout("rotateImage()", duration * 3000)
                }
            }
        </script>
      
    </head>
    <body>
        <div id="slideshow">
            <img id="rotatingImage" src="" alt="" height="200" width="200">
        </div>
        <script type="text/javascript">
            rotateImage();
        </script>
    </body>
</html>

No comments:

Post a Comment