This article was written in 2001. Although I wouldn't code a photo gallery this way today, it does demonstrate how it can be done easily in a Classic ASP.

I've never cared for traditional photo albums. They take up too much space, they reside in one location (unless copies are made), and after a few years go by they get buried in the attic. Digital photo galleries are far superior. Load up some pictures on some remote server, email out the URL, and presto you've got a photo gallery that people can access anytime they want. And no trips up to the attic.

Having a digital camera makes acquiring the photos easy, but constructing a new photo gallery every time you "shoot a roll of film" can be tedious and time consuming. What we need is a template that we can quickly upload the images and have the gallery operational in less than 30 minutes.

Prep the Pictures

Every digital camera is slightly different, but most generate an image that is too large and byte heavy for web viewing. So the first step is to reduce the size of the image and file. There are many tools that will do this. I use PhotoShop or ThumbNailer to create my photo galleries. If you've walked through the above example photo galleries you've probably noticed that all the images are the same size. This is by design. Having the images the same size allows the image to appear in the exact same spot on the screen as we traverse from image to image. It's also going to make our code easier. ThumbNailer can resize an entire folder on images with a single click.

Using your selcted graphic program, reduce the size of the images to the size you would like to use for the gallery. My 2 galleries use the dimensions of 400 width and 303 height. Reduce the size uniformily so the image doesn't appear stretched or squished. This is something the graphic program should be able to assist you with.

Name and Upload

This gallery is going to use numbers to keep track of the position of the gallery, so all images should be numerically named. Starting with "1", name the images: 1.jpg, 2.jpg, 3.jpg, etc. Make sure there are no gaps in the numbering sequence. For each gallery I build, I create a folder and then a sub-folder for the images. Once the folders are ready, FTP the files up.

Let's Code

Adding color, fonts, and logo graphics is something you can do on your own later. Let's get the gallery working first. This code can be dropped into the BODY of the .ASP file. The gallery definitions are at the top.

<% 
' define the number of pictures in your gallery, this will be the highest image number ex: 18.jpg 
numPix = 18 
imageWidth = 400 
imageHeight = 303 
' use the querystring to request the image 
pic = Request.QueryString("pic") 
' if this is the first page, default to picture 1 
If len(pic) = 0 Then pic = 1 
' build BACK functionality, I'm using an image called left.gif. 
If CINT(pic) = 1 Then     
   Response.Write "<a href=""default.asp?pic=" & numPix & """>" 
Else     
   prevPic = pic - 1     
   Response.Write "<a href=""default.asp?pic=" & prevPic & """>" 
End If 

Response.Write "<img src=""images/left.gif"" width=""40"" hspace=""10"" height=""30"" border=""0"" alt=""Go back""></a>"  
' draw selected image 
Response.Write "<img src=""images/" & pic & ".jpg"" width=""" & imageWidth & """ height=""" & imageHeight & """ vspace=""10"" alt=""photo"">" 
' build FORWARD functionality 
If CINT(pic) = numPix Then     
   Response.Write "<a href=""default.asp?pic=1"">" 
Else     
   nextPic = pic + 1     
   Response.Write "<a href=""default.asp?pic=" & nextPic & """>" 
End If 
Response.Write "<img src=""images/right.gif"" width=""40"" height=""30"" hspace=""10"" border=""0"" alt=""Next Photo""></a>" 
Response.Write "<br/>" 
' draw image number list below photo. This allows the user to jump around the gallery. 
For j= 1 to numPix    
 If j = CINT(pic) Then       
   Response.Write j & "  "    
 Else       
   Response.Write "<a href=""default.asp?pic=" & j & """>" & j & "</a> "    
 End If 
Next 
%>

Last Words

This is the down-and-dirty gallery that will work for most situations. In a future article, I'm going to build upon this gallery to add more features. In the meantime, go take some pictures.

Labels: ASP, Photos, VBscript