Gallery Showcasing

Although there are a plethora of methods for displaying image galleries/albums, this is a fairly simplistic method of doing so. I suppose instead of having to assign an onClick to every <a href>, one could assign an id to every image, or put them inside an element, through which a Javascript function could parse through and handle the onClick swaps -- oh well, though.

In all what we will want to accomplish will be: Display all the HTML notation required for a gallery through PHP with the use of a database file containing image references. The HTML notation will be: Main display image(which will be able to be replaced on-the-fly) and thumbnails that, if clicked on, will replace the main display image if the user has Javascript, and if not, open the image as a regular link. We will also want to make it so that you can display multiple galleries on the same page, so each gallery must have a unique name(As it is done in this guide, "gallery").

The Javascript code required will be limited to two functions - one to handle the swapping of the thumbnails to the main image, and the other to handle the swapping of the "loading" image whilst the main image is loading. The latter is handled by having a hidden <img> that will load the image onClick, and once it finishes loading(through onLoad), swap it with the main display image.

And so, the Javascript:

showcase.js

// This is to set our display img to the loading image whilst the actual image we want
// to display gets loaded in the hidden img. Then to switch when done(which will call swaponload).
function swap(image, id) {
	box = document.getElementById(id);
	if (box.src != id+'/'+image) {
		document.getElementById(id+'_loading').src = "loading.gif";
		box.src = id+'/'+image;
	}
}

// This is to swap the image contained in our hidden img with the actual img on display
// once it has loaded.
function swaponload(id1, id2) {
        box1 = document.getElementById(id1);
        box2 = document.getElementById(id2);
        if (box1.src != box2.src) {
                box1.src = box2.src;
        }
}

At this point one can now implement the gallery without the need for server-side PHP with the following HTML code:

<script type="text/javascript" src="showcase.js"></script>

<img width="256px" height="256px" src="loading.gif" id="gallery_loading" />
<img src="red.png" id="gallery" onload="swaponload('gallery_loading', 'gallery')" style="display: none;" />
<a href="red.png" onclick="swap('red.png', 'gallery'); return false"><img src="gallery/s/red.png" /></a>
<a href="green.png" onclick="swap('green.png', 'gallery'); return false"><img src="gallery/s/green.png" /></a>
<a href="blue.png" onclick="swap('blue.png', 'gallery'); return false"><img src="gallery/s/blue.png" /></a>

However, entering such code for every thumbnail manually, and particularly so if you have a large collection of images, will quickly become extremely tedious - and so, let us automate this process through PHP.

This will accomplished by having a function that will parse a database file for image entries, and based upon the results, generate the thumbnail tags as required.

First of all, this will be the standard directory/file structure per-gallery:

gallery.db <-- our database file
gallery/ <-- where our large images reside
gallery/s/ <-- where our thumbnails reside

Our database will be a one-dimensional array containing the image name references, as such:

gallery.db

Keep in mind that one can also do a multi-dimensional array to contain additional features such as image titles, commentary, etc.(or use PHP's explode() function to make depth in a single array).

As for our thumbnail generation PHP code, it will be as follows:

function display_thumbs($file) {
	$array = parse_ini_file($file);
	$dir = substr($file, 0, strpos($file, '.db')); 
	echo '<img width="256px" height="256px" src="loading.gif" id="',$dir,'_loading" />
	<img src="',$dir,'/',$array[0],'" id="',$dir,'" onload="swaponload(\'',$dir,'_loading\', \'',$dir,'\')" style="display: none;" />
	foreach($array as $item) {
		echo '<a href="',$dir,'/',$item,'" onclick="swap(\'',$item,'\', \'',$dir,'\'); return false"><img src="',$dir,'/s/',$item,'" /></a>';
	} 
}

Although this may look somewhat complex, due to all the single and double quotations, it is actually fairly simple, as long as you know of escaped quotations(i.e., \') and inserting PHP variables/functions as output.

Now all this is needed is to call the following(providing your web-server is PHP-enabled):

<?php 
function display_thumbs($file) {
	$array = parse_ini_file($file);
	$dir = substr($file, 0, strpos($file, '.db')); 
	echo '<img width="256px" height="256px" src="loading.gif" id="',$dir,'_loading" />
<img src="',$dir,'/',$array[0],'" id="',$dir,'" onload="swaponload(\'',$dir,'_loading\', \'',$dir,'\')" style="display: none;" />
	foreach($array as $item) {
		echo '<a href="',$dir,'/',$item,'" onclick="swap(\'',$item,'\', \'',$dir,'\'); return false"><img src="',$dir,'/s/',$item,'" /></a>';
	} 
}

?>

<script type="text/javascript" src="showcase.js"></script>
<? display_thumbs('gallery.db') ?>

The end result should be as follows:

Here is an optional BASH script that can generate a .db file from a directory, rather than having to input each and every image into the .db file:

builddb.sh

This could be easily handled by PHP aswell, but having a bash script is easier(for me) due to the fact that one does not need to worry about server permissions, as well as the fact that I would generally be in the console anyhow.

Although there are many other ways of achieving the same results, I find this to be highly effective for majority of my needs. Additionally, I am sure there is plenty of room for improvement, but it is functional, and is possible to call display_thumbs() multiple times(providing the galleries have different names).