I liked the css included in the original Tutorial as found on the Sonspring site, but I knew there was more than one use for the Hoverbox and took it upon myself to explore the use of the Hoverbox on a site I webmaster.
- One thing that wasn't right was having to hardcode the image tags, so the first version I wrote used php to fill the Hoverbox by reading the Image filenames from the Image folder and inserting them into the html.
- Another was the use of the anchor (<a>) tag to trick Internet Explorer into activating the on-hover event, so I included the filename as the target of the anchor tag so that the on-click event actually does something. It opens a window and displays the full sized picture in your browser.
- The website I wanted to use the Image Gallery on is for a Minor Hockey program and I also wanted a 'randomization' of the pictures so that each time you viewed the page a different selection of pictures was displayed. This avoids the possibility of suspicious selection methods (Why isn't little Johnny's picture on the site?)
- and lastly, I wanted this code to be flexible in terms of the number of pictures displayed on the page, so I have a 'maximum number' variable which displays, well, a maximum number of pictures. This raised the possibilty of there not being enough Images, so a check is made to display the lesser of the max_num or actual_num of pictures.
CODE
// Hoverbox Image Gallery - adapted
//
// Original Hoverbox code by Nathan Smith
// http://sonspring.com/journal/hoverbox-image-gallery
//
// PHP script adaptation by Jim Haslip jlhaslip@yahoo.ca
//
// A main feature in the original Hoverbox was a method for the thumbnail
// Images to grow to double the thumbnail size when hovered over.
// The Hoverbox swap of Images is entirely CSS-based. No javascript was injured in
// the making of this display.
//
// Added in this script are :
// - an on-click event to display the Images full size
// - added the php scripting to load the contents from a directory
// - added a max number of images to be displayed
// - added a random feature for selecting the Images to be displayed
//
// There could be several versions adapted from this script. ie: remove the full size
// on-click feature, change the maximum number to display, remove the randomness.
// I will eventually have each of these versions available, but at present,
// you will have to Mod the script yourself.
//
//
//
<?php
echo '<ul class="hoverbox">';
//
// set some variables used in the script
//
$max_num = 15; // maximum images displayed in the Hoverbox
$j=0; // a counter variable
$narray = array(); // declare an array containing the file-names of the images
//
// set directory paths here.
// There are Bandwidth issues with loading the 'full-size' pictures for use as thumbs
// and mid-size, however, there is a time-delay issue on-click when the full-size
// picture must then be downloaded. Your call on that one. The Demo uses three Folders.
// To minimize the bandwidth usage, use only one directory of optimized pictures,
// but be sure to alter the paths accordingly.
// All occurences of a picture MUST have the SAME NAME whether in one or three directories.
// The filenames don't appear to be case-sensitive. ( PIC001 = pic001 = PiC001 = pIc001 )
//
$dir = "images/"; // name of the folder where the Thumbnail images are stored
$mid_dir = "mid_images/"; // name of the folder where the Mid-sized images are stored
$full_dir = "full_images/"; // name of the folder where the Full-sized images are stored
//
// check to confirm the directories exist and can be opened
//
if (is_dir($dir) && (is_dir($mid_dir)) && (is_dir($full_dir)) ) {
$dh= @opendir($dir) or die("Unable to open $path please notify the administrator. Thank you.");
//
// loop while you read the entire directory listing selecting only files which
// 1. are not the (.) or (..) directories
// 2. are jpeg ( or as specified in the file type below )
// 3. exist in both the mid-size and full-size directories named in the path variables
//
while (($file = readdir($dh)) !== false) {
//
// ignore the directory entries and only select the .jpg file extension files
// alter the '.jpg' to suit your format
//
if (($file != '.') && ($file != '..') && (stristr($file,'.jpg'))) {
//
// confirm the file exists in both the mid and full directories
//
if ((file_exists($mid_dir . $file)) && (file_exists($full_dir . $file))) {
//
// add them to an array if all is good so far
//
$narray[]=$file;
//
// increase counter when a file is added to the array
//
$n++;
}
}
}
//
// reset the max_num if not enough pictures meet the criteria
//
if ($n < $max_num) {
$max_num = $n;
}
//
// randomize the array for presentation
//
shuffle( $narray);
//
// echo the correct html as per the Hoverbox Tutorial found at
// http://www.sonspring.com
//
while ( $j <= $max_num-1) {
echo "\t" . '<li><a href="' . $full_dir . $narray[$j] . '" alt="full-size">
<img src="' . $dir . $narray[$j] . '" alt="' . $dir . $narray[$j] . '" >
<img src="' . $mid_dir . $narray[$j] . '" alt="mid-size" class="preview" /></a></li> ' . "\n\r\t";
$j++;
}
}
//
// report an error on the directory confirmation
//
else {
echo 'There is a problem with the directories. Please Notify the Administrator. Thank You.';}
closedir($dh);
echo '</ul>';
?>
View a Sample Page Here.
