Auto slideshow

[ruturajv]

instead of meta tag use javascript setTimer function to change the page
as an "Escape" on the browser will disable the auto reload

[natio]

The following code is a small part of how i build a photo slidshow with php, javascript and mysql. Using javascript will add
a nice affect so the whole page wont have to reload everytime you want a new pic cause it will be annoying to your users viewing the images. I can also add a cool fading in affect with javascript to make it look more appealing. If you need any help on this i would be mora than happy to help you out. Just pm me

Code: Select all

<script type="text/javascript">
<?

// TOTAL NUMBER OF PICS
$TOTALPICS = 10;

// TIME TO UPDATE THE IMAGE
$TOTALTIME = 3000;

$i = 0;

$a = mysql_query("SELECT * FROM `table` ORDER BY rand() DESC LIMIT 0,$TOTALPICS");
while ($b = mysql_fetch_array($a))
{
       // IMAGE LOCATION.
       $img = 'gallery/'.$b['id'].'.jpg';

        // GET THE NEW NUMBER
        $i++;
 
        // GET IMAGE WIDTH AND HEIGHT IF YOU DONT HAVE IT ALREADY IN THE DATABASE
        list($width, $height) = @getimagesize( $img );

       // VAR. FOR JAVASCRIPT TO SET FOR NEW IMAGES TO LOAD
   echo 'var image'.$i.'= new Image();'."\n";
   echo 'image'.$i.'.src="'.$img.'";'."\n";
   echo 'var width'.$i.' = "'.$newWidth.'";'."\n";
   echo 'var height'.$i.' = "'.$newHeight.'";'."\n";
}

// ECHO THE IMAGE TO DISPLAY
echo 'document.write("<img src=\"spacer.gif\" name=\"slide\"  width=\"75\" height=\"75\">");'."\n";

?>
var step=1

function slideit()
{
   
   if (!document.getElementById(\'thephoto\'))
   {
      return false;
   }

   document.images.slide.src=eval("image"+step+".src");
   document.images.slide.width=eval("width"+step+"");
   document.images.slide.height=eval("height"+step+"");

   if (step < '.($TOTALPICS + 1).')
   {
      step++
   }
   else
   {
      step=1
   }

   setTimeout("sendLo()",'.$TOTALTIME.');   
}

slideit();

</script>