Imisnew2

Due to the 10k character limit, this blog had to be split in two!
This blog isn't programmer friendly, I tell ya!

See Part 1 here.

So Where Were We? Oh Yea!
We've generated the nav items and thumbnails by now, so lets look at the php that gave us the addresses in the first place!

javascript.php (bad name, but I haven't gotten to changing it yet)

Code:

<?php
  function getPaths($directory = '../../photos')
  {
    $paths = array();
    $dirData = scandir($directory);
    
    if ($dirData)
    {
      foreach ($dirData as $data)
      {
        if (is_file($directory . "/" . $data))
        {
          $paths[] = $directory . "/" . $data;
        }
      }
    }
    return $paths;
  }
  
  function getDirs($directory = '../../photos')
  {
    $dirs = array();
    $dirData = scandir($directory);
    
    if ($dirData)
    {
      foreach ($dirData as $data)
      {
        if (is_dir($directory . "/" . $data) && $data != '.' && $data != '..')
        {
          $dirs[] = $directory . "/" . $data;
        }
      }
    }
    return $dirs;
  }
  
  function getThumb($filePath)
  {
    $index = strrpos($filePath, '/');
    $beg = substr($filePath, 0, $index);
    $middle = '/Thumbnails';
    $end = substr($filePath, $index); 
    
    if (file_exists($beg . $middle) && file_exists($beg . $middle . $end))
    {
      $thumbPath = $beg . $middle . $end;
    }
    else
    {
      $thumbPath = $filePath;
    }
    return $thumbPath;
  }
  
  $pictureExtension = '(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)';
  $pictureDirs;
  $picturePaths;
  $count = 0;
  
  //Get all the picture categories.
  echo "navItems.push('All Photos');\n";
  $pictureDirs = getDirs();
  foreach ($pictureDirs as $dir)
  {
    $dirEnd = end(explode("/", $dir));
    echo "navItems.push('{$dirEnd}');\n";
    
    echo "picAddresses.push(new Array())\n";
    echo "thumbAddresses.push(new Array())\n";
    $picturePaths = getPaths($dir);
    foreach ($picturePaths as $path)
    {
      if (ereg($pictureExtension, $path))
      {
        echo "picAddresses[{$count}].push('{$path}');\n";
        echo "thumbAddresses[{$count}].push('" . getThumb($path) . "');\n";
      }
    }
    $count++;
  }
?>

We start off by declaring 3 functions.
One to give us all the files within a directory.
One to give us all the directories within a directory.
And one to give us the path to the thumbnail of a picture.

Then we actually use those functions.
First, we get all the directories of the photo categories (I.E. the nav bar items!).
Then, we get all the paths within each directory and all the thumbnails to go along with them.
Each time, we echo the javascript out, which is like writing code with code, which was interesting to do at first,
but became tedious very fast. The simple things about each language were melding together, causing a lot of
errors, but I eventually got it right.

So, the php generates something like this:
navItems.push('All Photos');
navItems.push('Catacombs');
picAddresses.push(new Array())
thumbAddresses.push(new Array())
navItems.push('Forests');
picAddresses.push(new Array())
thumbAddresses.push(new Array())
picAddresses[1].push('../../photos/Forests/tree1.jpg');
thumbAddresses[1].push('../../photos/Forests/Thumbnails/tree1.jpg');
picAddresses[1].push('../../photos/Forests/tree2.jpg');
thumbAddresses[1].push('../../photos/Forests/Thumbnails/tree2.jpg');
picAddresses[1].push('../../photos/Forests/tree3.jpg');
thumbAddresses[1].push('../../photos/Forests/Thumbnails/tree3.jpg');
navItems.push('Waterfalls');
picAddresses.push(new Array())
thumbAddresses.push(new Array())
picAddresses[2].push('../../photos/Waterfalls/Rainbow_Falls.jpg');
thumbAddresses[2].push('../../photos/Waterfalls/Thumbnails/Rainbow_Falls.jpg');
picAddresses[2].push('../../photos/Waterfalls/Rainbow_Falls_2.jpg');
thumbAddresses[2].push('../../photos/Waterfalls/Thumbnails/Rainbow_Falls_2.jpg');
picAddresses[2].push('../../photos/Waterfalls/Rainbow_Falls_Lower.jpg');
thumbAddresses[2].push('../../photos/Waterfalls/Thumbnails/Rainbow_Falls_Lower.jpg');
picAddresses[2].push('../../photos/Waterfalls/Rainbow_Falls_Lower_Watercolor.jpg');
thumbAddresses[2].push('../../photos/Waterfalls/Thumbnails/Rainbow_Falls_Lower_Watercolor.jpg');
picAddresses[2].push('../../photos/Waterfalls/Rainbow_Falls_Watercolor.jpg');
thumbAddresses[2].push('../../photos/Waterfalls/Thumbnails/Rainbow_Falls_Watercolor.jpg');

Aaaand you can figure out what it does from there.

One more thing I want to show ya before we close for the night!
Snippet from gallery.php

Code:

/*
Manage the margins of the frame to center the image
as well as manage the size of the "middle" to push
the footer to the bottom of the page.
This is based off the image that was selected.
*/
function setupPictureFrame(image)
{
  var middle = document.getElementById("middle");
  var frame = document.getElementById("pic_frame");
  
  var picWidth;
  var frameHeight;
  var frameHorizMargins;
  var frameVertMargins;
  
  //Determine if image is too wide for window.
  if (image.width > maxPicWidth)
  {
    picWidth = maxPicWidth;
    frameHeight = image.height * (maxPicWidth / image.width) + PICFRAME_FRAME;
  }
  else
  {
    picWidth = image.width;
    frameHeight = image.height + PICFRAME_FRAME;
  }
  
  //Determine if picture is taller than the minimum middle size.
  if (frameHeight > thumbFrameHeight)
  {
    middle.style.height = frameHeight;
    frameVertMargins = 0;
  }
  else
  {
    middle.style.height = thumbFrameHeight;
    frameVertMargins = (thumbFrameHeight - frameHeight) / 2;
  }
  
  //Calc margins.
  frameHorizMargins = (maxPicWidth - picWidth) / 2;
  
  //Display the picture.
  document.getElementById("pic_photo").style.maxWidth = "1px";
  document.getElementById("pic_photo").setAttribute("src", image.src);
  document.getElementById("pic_photo").onload = growImage(frameVertMargins, frameHorizMargins, picWidth, 20);
}

function growImage(vert, horiz, width, speed)
{
  maxVert = (thumbFrameHeight - 15) / 2;
  maxHoriz = (maxPicWidth - 15) / 2;
  
  t = setTimeout("grow("+ maxVert +","+ vert +","+ maxHoriz +","+ horiz +", 1,"+ width +","+ speed +")", 6);
}

function grow(curVert, minVert, curHoriz, minHoriz, curWidth, maxWidth, speed)
{
  curWidth += speed;
  curHoriz -= speed / 2;
  curVert -= speed / 4;
  
  if (curHoriz > minHoriz)
  {
    document.getElementById("pic_frame").style.marginLeft = curHoriz + PICFRAME_LMARGIN;
    document.getElementById("pic_frame").style.marginRight = curHoriz;
  }
  else
  {
    document.getElementById("pic_frame").style.marginLeft = minHoriz + PICFRAME_LMARGIN;
    document.getElementById("pic_frame").style.marginRight = minHoriz;
  }
  
  if (curVert > minVert)
  {
    document.getElementById("pic_frame").style.marginTop = curVert;
    document.getElementById("pic_frame").style.marginBottom = curVert;
  }
  else
  {
    document.getElementById("pic_frame").style.marginTop = minVert;
    document.getElementById("pic_frame").style.marginBottom = minVert;
  }
  
  if (curWidth < maxWidth)
  {
    document.getElementById("pic_photo").style.maxWidth = curWidth;
    t = setTimeout("grow("+ curVert +","+ minVert +","+ curHoriz +","+ minHoriz +","+ curWidth +","+ maxWidth +","+ speed +")", 6);
  }
  else document.getElementById("pic_photo").style.maxWidth = maxWidth;
}

This code is what makes the window quickly resize to the photos max size.
Due to character restraints (again!) I can't explain this one in detail.

We basically find out what the margins should be at the end of the resize and the beginning of the resize. We then increment the photo size
by the speed and decrement the margins by half the speed (to keep the photo centered).
Then we stop once it's big enough.

These are just here because they were in index.php and someone got worried that I missed them.
header.html

Code:

<div id="header" class="header">
  <p>Title Of Website</p>
</div>

footer.html

Code:

<div id="footer" class="footer">
    <p>Copyright© something something something. Trademark™ blah blah blah.  Check out <a href="http://www.google.com">This Link!</a></p>
</div>

A Little Conclusion...
I started this site because my parents helped me buy a laptop for college. Their requirements were, once I knew how, I had to make them a website.
I've been holding off on giving out any personal information about the website (names, etc) because it isn't live yet. However, once it goes live, I'll be sure to let you know!

-----------------------------------------------------------
Project Started: May 31, 2010
Percent Complete: 65%
-----------------------------------------------------------