Dynamic Image Gallery - Create a thumbs page.

In many cases, when we have many pictures to show, it is a good idea to save those pictures in different folders, according to the subject.

For example, you may want to save the "Trip-to-Alaska" in 2 folders, such as
"Trip-to-Alaska-Visits-the-Solomons" and
"Trip-to-Alaska-Welcome-Party"

When you now want to show the images, a thumbs page may come very handy: You create a page with thumbs, and each thumb represents the content of each folder. When you click on such thumb it will call the Dynamic Image Gallery and display the content of that specific folder.

There are many ways to create a thumbs page, How ever, if you have many folders and you intent to have many thumbs on your page, you are facing a hard work task that takes long time.

The good news is that the Dynamic Image Gallery is offering you a little trick to create thumbs pages with many thumbs in a fairly short amount of time and little effort.

The assumption is that you are using Font Page or similar program.

Lets say that you need to display the content of 12 subfolders with the Dynamic Image Gallery.

To do so, you want to create 1 thumbs page with 12 thumbs on it, each represent the content of each folder.

Follow the steps below:

Create new HTML page.
Insert a table on it, with 3 rows, and 4 columns.
Set the Vertical and Horizontal alignment to Center.
Go to the "Code" tab of the page.
In the <head> section, above the </head> tag, add the follow lines:
<script>
function openGallery(oImg)
    {
    window.open("/Dynamic-Image-Gallery/ImageGallery.php?folder=" + oImg.src,
    "_blank","toolbar=0,location=0,status=1,menubar=0,scrollbars=1,resizable=0");
    }
</script>
Locate the code of the upper left cell. It should be similar to this:
<table>
<tr>
<td valign="middle" align="center"> </td>
Replace the   portion with the code below:
<img border="0" src="" onclick="openGallery(this)" style="cursor:hand;">
Go back to the "Design" tab of the page. You'll find a blank image at the upper right cell.
Right Click on the blank image at the upper left cell, and then click on Copy
Paste the blank image in each of the cell, so you'll have total of 12 BLANK images, as planed.
Now you'll double click on each of the images, and select the proper thumb from each of the subfolders you want to show. This will populate the blank thumbs with real pictures that represent the content of each of the subfolders.
Save the page.
Link it to another page or to the menu of your site.
Publish your site.
Smile! :-)

How it works:

The Cursor of the image is set to "hand" so when mouse move over it it looks like a link.

The onClick event of the image calls the openGallery() function and pass the image's object to it.

The openGallery function open the Dynamic Image Gallery and pass to it the source of the image, that is full path and the image name.

The Dynamic Image Gallery detect that entire location of an image was passed to it, and extract the folder location out of it.

It then go to the folder, figure out which files are saved there, and create the Dynamic Image Gallery accordingly.

Next ->