Nerdrium Home



Web Design

Case Mods





My Blog




Formatting and Displaying Photos

Page 5

Okay, a brief explanation is in order. The function createWindow opens a pop-up window that contains the full-size version of the image. It appears when the thumbnail image is clicked.

The function thumbGrid starts with the evillest of programming mistakes--a "magic number." In my example, there are 39 photos, so numPics is set to 39. You will have to manually change that number to match the number of images you have. Oh, and it gets worse. The number of images needs to be a multiple of 3. Otherwise you'll have some missing images. If the number of photos I am going to display is not a multiple of three, I will usually find one or two to get rid of so that the final number to be displayed fits that criteria. Otherwise, I'll make a blank white image. And if people click on the blank white thumbnail, well, they get a blank white pop-up window. :)

Okay, anyway, the thumbGrid iterates through and draws table rows until it gets up to the "magic number." For each loop it goes through a small loop (three times) and draws the table cells. Inside each table cell is a thumbnail image, which is a hyperlink to the javascript function that creates the pop-up window. The name of the image to be popped-up is created in the loop and is passed to the pop-up function.

Yes, I realize that this is not the neatest code in the world, but again, this was a hack that I probably came up with late at night, and it works, so I never went back and tidied up. (And it was all indented properly, but the cut-and-paste made that go away and I do not have any desire to insert all the non-breaking spaces to indent things...).

Save this file as "index.html." Now, for all of this to work, you will need a directory with the name of your project, for example "zoo." That directory should contain the index.html file, a directory "photos" full of the photo images, and a directory "thumbs" full of all of the thumbnail images. Want to see how it works? Here's a trip to the zoo.

Previous [1] [2] [3] [4] [5]