Announcement

**dannybierek** · Jul 9, 2012, 05:09 AM

Maybe this will help

This code sample may help if you still need it. I echoed the php values into a javascript array.

Code:

<html>
<head>
<?php
   $directory="art";
   // create a handler to the directory
    $dirhandler = opendir($directory);
 
    // read all the files from directory
    $nofiles=0;
    while ($file = readdir($dirhandler)) {
 
        // if $file isn't this directory or its parent 
        //add to the $files array
        if ($file != '.' && $file != '..' && preg_match("/thumb.jpg/", $file) == 0)
        {
         $files[$nofiles++]=$file;                
        }   
    }
    //close the handler
    closedir($dirhandler);
echo "<script type='text/javascript'>\n";
echo "var imageID=-1;\n";
echo "var files=[";
$notfirst = false;
foreach ($files as &$file) {
   if ($notfirst) {
      echo ", ";
   }
   else {
      $notfirst = true;
   }
   echo "['".$file."','".$file."thumb.jpg']";
}
echo "];\n";
echo "var paused=false;\n";
echo "var timerTIme=2;\n";
echo "var timer;\n";
echo "function pause() {\n";
echo "   clearTimeout(timer);";
echo "   paused = true;\n";
echo "}\n";
echo "function resume() {\n";
echo "    paused = false;\n";
echo "    timer = setTimeout('changeimage('+timerTIme+')',((timerTIme)*1000));\n";
echo "}\n";
echo "function prev() {\n";
echo "    if (imageID>0) {\n";
echo "        imageID--;\n";
echo "    } else {\n";
echo "        imageID = $nofiles - 1;\n";
echo "    }\n";
echo "    updateimage();\n";
echo "    clearTimeout(timer);\n";
echo "    timer = setTimeout('changeimage('+timerTIme+')',((timerTIme)*1000));\n";
echo "}\n";
echo "function next() {\n";
echo "    if (imageID < $nofiles - 1) {\n";
echo "        imageID++;\n";
echo "    } else {\n";
echo "        imageID = 0;\n";
echo "    }\n";
echo "    updateimage();\n";
echo "    clearTimeout(timer);\n";
echo "    timer = setTimeout('changeimage('+timerTIme+')',((timerTIme)*1000));\n";
echo "}\n";
echo "function updateimage(){\n";
echo "     document.getElementById('imagelink').href='art/'+files[imageID][0];\n";
echo "     document.getElementById('myimage').src='art/'+files[imageID][1];\n";
echo "}\n";
echo "function changeimage(every_seconds){\n";
echo "   clearTimeout(timer);\n";
echo "   if (!paused) {\n";
echo "      timerTIme = every_seconds;\n";
echo "      //change the image\n";
echo "      if(imageID<$nofiles){\n";
echo "         imageID++;\n";
echo "         updateimage();\n";
echo "      }\n";
echo "      else{\n";
echo "         imageID=0;\n";
echo "      }\n";
echo "      //call same function again for x of seconds\n";
echo "      timer = setTimeout('changeimage('+every_seconds+')',((every_seconds)*1000));\n";
echo "   }\n";
echo "}\n";
echo "</script>\n";
?>
</head>
<body onload='changeimage(3)'>
<div style='width:33%;top:50px;left=0px;position:absolute;' align='center'>
These are the images in my portfolio for drawing class.</br>Hover over an image to pause</br><a onclick='prev()'><u>Previous</a></u> <u><a onclick='next()'>Next</a></u></br>
<a id='imagelink' href='art/0.jpgthumb.jpg'><img width='100%' id='myimage' src='art/0.jpg' onmouseover='pause()' onmouseout='resume()'/></a></div>
</body></html>

**dannybierek** · Jul 9, 2012, 05:34 AM

Here is how to get the images from an images database set up like this (Change these to your actual values):
Server: localhost, Username: user, Password: pass
Database: db, Table: images, Column: src

Code:

<?php
$conn = mysql_connect("localhost","user","pass");
mysql_select_db("db");

$data = mysql_query("select src from images");
$numimages = 0;
while ($row = mysql_fetch_assoc($data)) {
   $images[$numimages] = $row['src'];
   echo "<img src='$images[$numimages]'>";
   $numimages++;
}
?>

Announcement

Image "mouseover" ZoomIn & Out Not Working!

Image "mouseover" ZoomIn & Out Not Working!

Comment

Comment