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 selected 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 uniformly 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.
