This photo gallery uses a list tag and CSS to place the thumbnails on the page. It then uses JavaScript to display the larger images on the same page - greying out the thumbnails until the image layer is dismissed.
Scroll down for instructions on how to get the files for this template.
Windows
- Firefox and Mozilla 1 and 2
- Internet Explorer 6 and 7
- Opera 8.5 and 9
- Safari 3 (beta)
Macintosh
- Firefox and Mozilla 1 and 2
- Netscape 7
- Opera 9
- Safari 1, 2 and 3
- Centered 780px wide layout
- All photo thumbnails are in an unordered list and styled with CSS
- Clicking on a photo displays the full-size photo in a layer on the same page
- Mousing over a photo displays a caption below the photo
- In Firefox, all borders are rounded
- Copy the CSS into a document named styles.css
- Copy the JavaScript file into a document named scripts.js
- Copy the HTML into a file in the same directory
- Change the images in the list to your images
- Don't forget to add a title to the page
- Publish all documents (HTML page, CSS file, and JavaScript file)
- If you want to add design changes - create another CSS file or add it to styles.css
The gray out effect was generated from a script from Hunlock.com. The popup effect is done based on Eric Meyer's Pure CSS Popups.
One of the easiest ways to create thumbnails is with Fookes Easy Thumbnails (Windows) or CocoThumbX (Macintosh). Sue, the Graphics Software Guide explains how to use Easy Thumbnails.
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.
