left round   right round
Photogallery Logo sharing gif









Other Shots

Newest Galleries


Digicamhelp Link - The digital camera guide for beginners.

The Digital Camera Guide for Beginners


Valid HTML 4.01!

Photogallery Tutorial


Your images and thumbs are done, the large image pages have been created, saved and linked, now it’s time to build the thumbnail gallery.
The thumbnail gallery page is just another page within your site only it needs a layout to allow placing your thumbnail images. Create a table within the page (or divide a cell) with sub cells enough to hold your thumbnail images.

Page Header

Site Navigation

Descriptive paragraph about the gallery

Image 1 Image 2 Image 3
Image 4 Image 5 Image 6
Image 7 Image 8 Image 9
Page Footer

First let’s add the JavaScript needed for the popup.
In the <head> </head> section of the gallery page insert the following script (best to copy and paste):

<script type="text/javascript">
function open_window(url) {
mywin = window.open(url,"win",'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=660,height=540,left=5,top=5');

Set the value for each option as either 1 or 0 depending on your needs. This allows you to decide if you want a menu bar, scroll bars, status bar, etc. The width and height settings determine the size of the popup. I try to keep this as close to the size of the large image as possible so as to not cut off the image or to need scroll bars. The option for “left” and “top” determine the position of the popup relative to the left and top of the browser window (in pixels). In the script above the popup will have no decoration (scroll bars, menu, etc.). It will be 660 x 480 pixels in size and be positioned 5 pixels from both the left and top borders.



Photogallery Tutorial
Page 1
Page 2
Page 3
Page 4
PDF Version
10x120 spacer
Photogallery - copyright 2003-2004