// Hoverbox Image Gallery - adapted to read a directory of Images and Randomize the Presentation // ============================================================================================= // // Original Hoverbox code by Nathan Smith @ http://host.sonspring.com/hoverbox/ // // PHP script adaptation by Jim Haslip, jlhaslip@yahoo.ca, http://www.jlhaslip.trap17.com/ // // 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 and checks to confirm the number of images is okay // - added a randomization feature for selecting the Images to be displayed if more than max-number are available // // 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. // // Insert this script in the Hoverbox html page in place of the code for the Unordered List which displays the images. Rename the page with a suitable extension (php), or mod your .htaccess file to parse html as php. And this script requires a Web Host which offers php with their service, of course. // '; // // set some variables used in the script // $max_num = 15; // maximum images to be displayed in the Hoverbox $j=0; // a counter variable $narray = array(); // declare an array containing the file-names of the images used for randomizing the list // // 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 which method suits you best. The Demo uses three Folders, one for each size, which is the slowest possible setting, other than using over-sized images since they take longest to download and requires more bandwidth to provide, etc, blah, blah... // To minimize the bandwidth usage, use only one directory of optimized pictures, but be sure to alter the paths accordingly. // // example: // // $dir = "full_images/"; // will cause all images to be loaded from a single folder // $mid_dir = "full_images/"; // where the full-sized images are stored. The Hoverbox html sizes them down to suit the thumbnail size and mid-size, but must download the entire gallery of pictures before displaying the thumbs. // $full_dir = "full_images/"; // // // 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)) ) { // main if start // $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) { // start while here // // 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'))) { // start outer if // // confirm the file exists in both the mid and full directories // if ((file_exists($mid_dir . $file)) && (file_exists($full_dir . $file))) { // start inner if // // add them to an array if all is good so far // $narray[]=$file; // // increase counter when a file is added to the array // $n++; // } //end inner if // } // end outer if // } // end while here // // reset the max_num if not enough pictures meet the criteria // if ($n < $max_num) { // start max_num if $max_num = $n; } // end max_num if // // 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" . '