Several people have contacted me to ask just how I went about creating my Photogalleries so I’ve put together this tutorial for anyone who might be interested in trying my method. Please note that this tutorial isn’t exactly how I’ve done it in the past. As I put it together I’ve realized a few simplifications.

Building a Photogallery - Manually.
There are a lot of packages available from the Internet and various software companies that will create nicely performing photo galleries. Some include the option of having a slide show, others will size your images for you automatically and even create the thumbnails.

Personally I haven’t found one yet that quite gives me the ability to lay things out exactly as I would like so I resorted to doing things the hard way. I create the whole thing manually using a bit of JavaScript to execute the popups and the slide show. It seems a lot of steps but once the templates have been created it’s really pretty easy to change the images and links and set up new galleries.

The first step is to prepare the images. Create a large image sized for viewing on a monitor set at 800 x 600, I generally go with 640 x 480 but larger can be used. Avoid making the large image so large as to cause side-to-side scrolling for the viewer. Along with the large image create a thumbnail copy for the gallery page. I usually use a dimension of 125 x 94. Don’t ask me why, it just worked out that way. You can go a little larger or a little smaller. It’s during this process that I experiment with compression to achieve the best image at the smallest file size. I try to end up with a large image no bigger than 100 kb. It will be on it’s own page so it should open fairly quickly. The thumbnails I try to keep under 4 kb as there will be a collection of them on a page and I want to keep the load time as quick as possible.

Note: Try to keep the image names as simple as possible and be sure to use the same name for the thumbnail as for the large image so you can easily relate the two. It will be helpful if the thumbnail has an added _sm extension to distinguish it. It also helps to store them in different folders (“large” – “small”). Keeping the name the same will help enormously when you’re ready to link them for the popups.

Once all the images and thumbs are ready and saved to their respective folders I open my site in FrontPage and drag each folder into the “images” folder for the site. I do this so that FP doesn’t have an opportunity to “play” with the compression of the images. There are other ways of getting the images to the site, this is just the way I do it.
OK, the images are ready and they’re in the site. What’s next?

Top