Esscotti Web development & SEO

Thumbnail rollover image gallery with captions

This image gallery is implemented in PHP and uses javascript and CSS to display the image under the mouse pointer. The benefit of this rollover effect is that the site visitor can vey quickly browse the images in the gallery. The downside is that all images need to be loaded first. You can see a variant of this gallery in action at http://www.orcabags.co.uk/bags.php

Pleae feel free to use this code in any way you want. If you use it on your website then please let me know. Feedback is always welcome.

The images to display in the gallery are specified in a simple text file that defines the image filename and the caption to use for each image. In this example this file is called gallery1.txt and contains the following lines.

img1.jpg;Image caption 1
img2.jpg;Image caption 2
img3.jpg;Image caption 3
img4.jpg;Image caption 4

The gallery script assumes that you have two folders 'images' and 'thumbs' in the same place as the gallery1.txt file where all the images are stored. The thumbnails should have the same filenames as their full-size equivalents that are stored in the 'images' folder.

In order to implement this gallery on your page you need to insert the javascript block that you get from calling gallery_script() from gallery.php (gallery.php is listed further down on this page). The resulting string should be placed inside the html header.

<?php
// This is done in the page header...
echo gallery_script('galleries/', 'galleries/gallery1.txt');
?>;

Then, in the body of the page, you need to call the function gallery() at the place where you want the gallery to be displayed.

<?php
 gallery('galleries/', 'galleries/gallery1.txt');
?>

The gallery is implemented in the gallery.php file and needs to be included at the top of your page.

<?php
 require_once('galleries/gallery.php');
?>

The following code is the 'gallery.php' script.

<?php
define('GALLERY_TNWIDTH', '80');
define('GALLERY_TNHEIGHT', '80');
define('GALLERY_NUMCOLS', '2');
define('GALLERY_TNBORDER', '1');

function gallery_script($folder, $gallery, $stickyimage=true) {

 $str = "<script language=\"JavaScript\" type=\"text/JavaScript\">\n";
 $str .= "<!--\n";
 $str .= "var preloadedimages   = new Array();\n";
 $str .= "var images   = new Array();\n";
 $str .= "var captions = new Array();\n\n";
 $str .= "var blankimage;\n";
 $str .= "blankimage = new Image();\n";
 $str .= "blankimage.src = \"/img/blank.gif\";\n";
 $num = 0;

 if (($handle = @fopen($gallery, "r")) !== false) {
 // Parse the "images.txt" file and display gallery...
 while (!feof($handle)) {
 $line = fgets($handle);
 $params = explode(";", $line);
 $str .= "images[$num] = \"".trim($params[0])."\";\n";
 $str .= "captions[$num] = \"".trim($params[1])."\";\n";
 $str .= "preloadedimages[$num] = new Image();\n";
 $str .= "preloadedimages[$num].src = \"".$folder."images/".trim($params[0])."\";\n";
 $num++;
 }
 fclose($handle);
 }

 $str .= "\nfunction showimage(id) { \n";
 $str .= "    var str = \"".$folder."images/\"+images[id];\n";
 $str .= "    document.getElementById(\"galleryimage\").src = str;\n";
 $str .= "    document.getElementById(\"caption\").childNodes[0].nodeValue = captions[id];\n";
 $str .= "}\n";
 $str .= "\nfunction hideimage(id) { \n";
 if (!$stickyimage) {
 $str .= "    var str = \"".$folder."images/\"+images[id];\n";
 $str .= "    document.getElementById(\"galleryimage\").src = \"/img/blank.gif\";\n"; //str;\n";
 $str .= "    document.getElementById(\"caption\").childNodes[0].nodeValue = \"\";\n"; //captions[id];\n";
 }
 $str .= "}\n";
 $str .= "-->\n";
 $str .= "</script>\n";

 return $str;
}

function gallery($folder, $gallery, $stickyimage=true) {

 echo '<div style="border:0px dashed blue;padding:0px;margin-top:10px;height:1000px;position:relative;">';
 $num = 0; $rows = 0;
 if (($handle = @fopen($gallery, "r")) !== false) {
 // Parse the "images.txt" file and display gallery...
 while (!feof($handle)) {
 $line = fgets($handle);
 $params = explode(";", $line);
 if ($num%GALLERY_NUMCOLS == 0) { /*echo "<br>";*/ $rows++; }
 // draw thumbnail...
 echo "<a style=\"padding:4px\" href=\"javascript:void(0);\" onmouseover=\"showimage($num);\" onmouseout=\"hideimage($num);\"><img src=\"".$folder."thumbs/".$params[0]."\" width=\"".GALLERY_TNWIDTH."\" height=\"".GALLERY_TNHEIGHT."\" style=\"padding:0px;border:solid ".GALLERY_TNBORDER."px black\"></a>";
 if ($num == 0) {
 $firstimage = $params[0];
 $firstcaption = $params[1];
 }
 $num++;
 }
 fclose($handle);
 }

 $top = 95;
 $left = 4;
 if (!$stickyimage) {
 echo '<br><br><br><br><div style="position:absolute;top:'.$top.'px;left:'.$left.'px;"><img id="galleryimage" border="0" src="/img/blank.gif">';
 echo '<br><span id="caption"></span></div>';
 } else {
 echo '<br><br><br><br><div style="position:absolute;top:'.$top.'px;left:'.$left.'px;"><img id="galleryimage" border="0" src="'.$folder.'images/'.$firstimage.'">';
 echo '<br><span id="caption">'.$firstcaption.'</span></div>';
 }
 echo '</div>';
}
?>