Auto slideshow

images php coding issues or problems here.

Moderators: macek, egami, gesf

User avatar
ruturajv
php-forum Super User
php-forum Super User
Posts: 1280
Joined: Sat Mar 22, 2003 9:42 am
Location: Mumbai, India
Contact:

Postby ruturajv » Thu Jul 14, 2005 8:07 pm

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

natio
New php-forum User
New php-forum User
Posts: 28
Joined: Fri Jul 22, 2005 4:08 am
Location: Vacouver, Canada

Postby natio » Fri Jul 22, 2005 5:00 am

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>



Return to “PHP coding => Images”

Who is online

Users browsing this forum: No registered users and 1 guest