Photo Slideshow – Part Two – Simple Slideshow

After I got my photos resized it was time to move on to a simple slideshow. It doesn’t get more simple then this. I’ll go with the code first then provide a full explanation.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Simple SlideShow</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<?php
  //the first thing we need to do is determine if we are on index or if we are on a picture
  $picture_num = (isset($_GET['pic'])) ? $_GET['pic']: 1;
  //now we'll also need to read the full directory
  $files = scandir('images/700w', 1);
  $total_num = count($files) - 2;

  $prev = ($picture_num == 1) ? $total_num : $picture_num - 1;
  $next = ($picture_num == $total_num) ? 1 : $picture_num + 1;
?>

<body style="margin:0 auto;text-align:center;">
    <div class='navigation'>
      <a href="index.php?pic=<?php echo $prev; ?>">< Previous</a> |
      <?php echo $picture_num . ' of ' . $total_num; ?> |
      <a href="index.php?pic=<?php echo $next; ?>">Next ></a>
    </div>

    <div id='photo'>
      <a href="images/originals/<?php echo $files[$picture_num - 1]; ?>">
        <img src="images/700w/<?php echo $files[$picture_num - 1]; ?>" alt="Picture" style="border:none;">
      </a>
    </div>

    <div class='navigation'>
      <a href="index.php?pic=<?php echo $prev; ?>">< Previous</a> |
      <?php echo $picture_num . ' of ' . $total_num; ?> |
      <a href="index.php?pic=<?php echo $next; ?>">Next ></a>
    </div>


</body>
</html>

This simple slideshow uses a GET request to do it’s work. This is going to dirty up our URL’s but it follows KISS. If ‘pic’ is not set it is set to 1.

Scandir reads into an array the files and directories from a directory. I cheat here and read in the directory backwards to avoid numbering issues and to get rid of the . and .. problem. Don’t put any directories in the originals or you’ll end up with a broken picture.

We subtract two from the total number of entries to get the number of pictures we have to show. I then set my previous and next buttons. This isn’t as simple as subtracting or adding one. We need to cycle around if we are at the beginning or end.

With that information it’s a simple matter of putting it on the screen. I have a small amount of CSS in there to center and remove a border. There are a lot of features that could be added and a few quirks to iron out. What do you guys think?

Leave a Reply