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

Please 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>';
}
?>

If you are running a Debian Linux webserver you may want to create users that can upload and download files from specific directories via SFTP. This post will explain how to set this up. First you need to create a user. If you want to create a user with the name 'webdev' then login as root and use the following commands at the prompt.

useradd webdev

Now you want to set the password for the new user 'webdev'

passwd webdev

Now we can create a home directory with the following commands.

mkdir /home/webdev
chown webdev:users /home/webdev

Now we only want this user to be able to login to the server via SFTP. We can do this by changing the users shell to sftp-server.

usermod -s /usr/lib/sftp-server webdev

Next we need to make the sftp-server a valid shell by adding the line "/usr/lib/stfp-server" at the end of the file shells in the etc directory.

By default, a new user will be assigned to a new group with the same name as the new user. So in our case the user 'webdev' will belong to the group 'webdev'. In order to make our new user the owner of any other directory including sub-directories (such as the website document root) we can execute the following command.

chown -R webdev:webdev /var/www

So now the new user webdev will be able to login va SFTP and have owner permissions to their home directory as well the webserver document root directory.

References: The following page has more useful information about managing groups and users in Linux.

Further Restrictions

In the example above we made the directory that holds the website belong to the group "webdev". If you have other users on the system that you do not want to have access to the website data then it could be wise to assign the www directory to the group "www-data" and remove read access for other system users to the directory www.

This is in order to limit access from users except the web server that runs under the user www-data.

For example:

usermod -a -G www-data webdev
usermod -g www-data webdev
chown -R :www-data /var/www
chmod -R o-r /var/www

By doing the above, we have added the user webdev to the group www-data (the same user that Apache normally runs as). Then we make www-data the default group for the user webdev, whereafter we make the www directory belong to the www-data group and set the permissions such that the files in that directory are group-readable but not world-readable.