Category: Code

Posted on

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?

Posted on

Photo Slideshow – Part One – Batch Resize

The idea is simple, I want to be able to upload a directory full of pictures and have a slideshow. I have a few groups of photos to share with the world and more and more I’m keen on the idea of coding it myself rather then use a service like flickr or Picasa.

The first step was to upload my photos. I created a directory ‘images’ and inside that directory I created ‘originals’ and ‘700w’. I then uploaded all my pictures to the originals directory.

I then created a script to automatically resize all the images in my directory.

<?php
//it can take a bit to resize a bunch of images..
//php will by default only run for 30 seconds
//this removes that limitation
set_time_limit(0);

//open our directory
if ($handle = opendir('images/originals')) {
    //go through our directory filenames one by one
    while (false !== ($file = readdir($handle))) {
        //ignore our . and .. directories
        if ($file != "." && $file != "..") {
            //open our image
            $image = imagecreatefromjpeg('images/originals/'."$file");
            if ($image === false) { closedir($handle); die ('Unable to open image'); }

            //get our original image dimensions
            $owidth = imagesx($image);
            $oheight = imagesy($image);

            //our new dimensions, hardcoded for a 700 width
            //second line adjusts the height to keep the same aspect ratio
            $nwidth = 700;
            $nheight =  $newheight=($oheight/$owidth)*$nwidth;

            //create a new blank image the right size
            $tmpimg=imagecreatetruecolor($nwidth,$nheight);
            //and resize/resample our original into it
            imagecopyresampled($tmpimg,$image,0,0,0,0,$nwidth,$nheight,$owidth,$oheight);

            //write to file
            $filename = "images/700w/". $file;
            imagejpeg($tmpimg,$filename);

            //clean up
            imagedestroy($image);
            imagedestroy($tmpimg);
        }
    }
    closedir($handle);
}
?>

I saved this as ‘resize.php’ and ran it with ‘php resize.php’. After about a minute my 700w directory was full of resized images, and I’m all set up for the slideshow I want.