Free Web Template: Simple Photo Gallery Layout

About this Web Template:

It's easy to create a photo gallery where a series of thumbnails link to the main images. This photo gallery assumes that all my thumbnails are the same size, and all the main images are the same width. I use JavaScript to build the larger image page with a query string. This means I don't need multiple pages for the results.

See The Template

Works in Browsers:

Windows

• Firefox and Mozilla 1
• Internet Explorer 5 and 6
• Opera 8.5 and 9

Macintosh

• Firefox and Mozilla 1
• Internet Explorer 5
• Netscape 7
• Safari 1

Details:

• main div with 20 pixel margin
• every thumbnail is placed in a 100 pixel wide, left-aligned div
• the paragraphs in the thumbnail divs are centered under the image
• the images have no border
• the JavaScript creates the second page with a headline, image source, height, and alt text

To Use the Free Web Template:

1. Copy the CSS into a document named styles.css
2. Copy the HTML for the front page into a file in the same directory
3. Copy the HTML for the photo page into a page called photo.html in the same directory
4. Change the text to your content
5. You'll need to change the query string in the JavaScript for each image
6. Don't forget to add a title to both pages
7. Publish all documents (2 HTML pages and 1 CSS)
8. If you want to add design changes - create another CSS file or add it to styles.css

The JavaScript:

To create the photo page, I used a query string parser.

The Thumbnails:

One of the easiest ways to create thumbnails is with Fookes Easy Thumbnails (Windows). Sue, the Graphics Software Guide explains how to use Easy Thumbnails.

The Web Site Template Data:

• The XHTML
• The Photo Page XHTML
• The CSS
• The JavaScript

More Web Site Templates:

• Free Web Site Templates
• Free Menu Templates
• Other Web Site Templates

Terms of Use:

You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.