Scripting the Duval Rollover Template (code)

Scripting the Duval Rollover Template (PHP code)

PHP code that preceeds the HTML

<?php
$page_url = "family.htm";
$page_title = "Family Portraits by Photography by Duval";
$meta_description = "Family Portraits by Photography by Duval.";
$meta_keywords = "family,duval photography,distinctive,portraits";
$background_image = "../images/bk-family1.gif";
$image_path = "images/";
$thumb_path = "thumbs/";
$main_images_folder = "../images/";

// IMAGES (THIS LIST HAS BEEN SHORTENED FOR THIS SAMPLE. THERE WERE A TOTAL OF 28 IMAGES.)
$image[] = "fam_4637.jpg";
$image[] = "fam_4744.jpg";
$image[] = "fam_4770.jpg";
$image[] = "fam_4780.jpg";  // IMAGES ARE HARD-CODED HERE, BUT PHP CAN READ FROM A FOLDER
// NOTHING BENEATH THIS LINE NEEDS TO BE MODIFIED FOR THIS PAGE

$number_of_images = count($image);  // NUMBER OF PICTURES IN $IMAGE ARRAY
$images_displayed = 8;  // NUMBER OF THUMBNAILS DISPLAYED ON PAGE
$image_start = $n;  // N IS PASSED BY PREVIOUS OR NEXT ARROW CLICK

// DETERMINE WHETHER TO SHOW LINK FOR PREVIOUS
if ($image_start == NULL || $image_start == 0) {  // NO PREVIOUS IMAGES
  $image_start = 0;
  $left_arrow = $main_images_folder . "gr-blank.gif";
  $left_over = $main_images_folder . "gr-blank.gif";
  $left_link = "#";
} else {  // THERE ARE PREVIOUS IMAGES
  $left_arrow = $main_images_folder . "gr-left.gif";
  $left_over = $main_images_folder . "gr-left-glow.gif";
  $left_start = $image_start - $images_displayed;
  $left_link = "$page_url?n=$left_start";
}

$image_end = $image_start + $images_displayed;
// DETERMINE WHETHER TO SHOW LINK FOR NEXT
if ($image_end >= $number_of_images) {  // NO MORE IMAGES
  $image_end = $number_of_images;
  $right_arrow = $main_images_folder . "gr-blank.gif";
  $right_over = $main_images_folder . "gr-blank.gif";
  $right_link = "#";
} else {  // THERE ARE MORE IMAGES
  $right_arrow = $main_images_folder . "gr-right.gif";
  $right_over = $main_images_folder . "gr-right-glow.gif";
  $right_link = "$page_url?n=$image_end";
}

$j = $image_start;
if ($image) {
  for($i=0;$i<$images_displayed;$i++) {
    if($image[$j] == NULL) {
      $img[$i] = "";  // NOT NEEDED
      $thb[$i] = $main_images_folder . "gr-blank.gif";
      $mouseover[$i] = "";
    } else {
      $img[$i] = $image_path . "$image[$j]";
      $thb[$i] = $thumb_path . "$image[$j]";
      $mouseover[$i] = " onMouseOver=\"MM_swapImage('main','','$img[$i]',1)\"";
    }
    $j++;
  }
}

$preload_string = "'$img[0]','$img[1]','$img[2]','$img[3]','$img[4]','$img[5]',
  '$img[6]','$img[7]', '$left_over','$right_over'";
?>

Because this page is about the use of PHP to create a template for use with other pages, not shown is the Javascript that makes the rollovers work. (How it works will be covered a bit in a future Javascript section.) You can open a typical page to view the source to see the Javascript and HTML.

Also not shown, to simplify this page, is the use of PHP for title, metatags, background image, and pre-load string.
Here is a typical use of a PHP variable: <title><?=$page_title ?></title>

The following links are shown as a list for simplicity. On the page, they're organized in a table.