A simple Photo Album

If you like to have a simple photo album on your blog, here is an easy to implement solution, without any javascript! It is just CSS, and a bunch of html-links to the pictures you want to display. I found this toy at Stu Nichols's CSSPlay, and wanted to share it with you.

Attention: if you add this to your Blog using the Blogger editor (as I did), Blogger adds <br/>-tags where it sees new lines. These <br/>-tags mess up the album when displayed with Firefox.

• 01
• 02
• 03
• 04
• 05
• 06
• 07
• 08
• 09
• 10

First, you have to add the following CSS to your style-sheet.

/* Photo album */
#album {
width:320px;
height:360px;
background:#eee url(deer.jpg) 0 40px no-repeat;
border:1px solid #aaa;
margin:0 auto;
text-align:center;
}
.gallery {
position: relative;
margin: 320px 0 0 0;
width: 320px;
padding: 0;
list-style-type: none;
}
.gallery img {
border: 0;
}
.gallery li {
float: left;
}
.gallery li a, .gallery li a:visited {
font-size:11px;
float:left;
text-decoration:none;
color:#000;
background:#fff;
text-align:center;
width:26px;
height:26px;
line-height:24px;
border:1px solid #444;
margin:2px;
}
.gallery li a img {
position:absolute;
top:-320px;
left:0;
visibility:hidden;
border:0;
padding:0;
}
.gallery li a img.landscape {
top:-280px;
}
.gallery li a img.portrait {
left:0;
border-left:40px solid #eee;
border-right:40px solid #eee;
}
.gallery li a:hover {
background:#ddd;
}
.gallery li a:active img, .gallery li a:focus img {
visibility:visible;
}
.gallery li a:active, .gallery li a:focus {
background:#444;
color:#fff;
}
*/ End photo album */

Second, find the a:link definition in your CSS, and add definitions for a:visited, a:hover and a:active. you can format these anyway you like, but they must be in your template for the photo-album to work correctly (because of a bug in IE).

Third, at the spot where you want the album to appear, add the following html:

<div id="album">
<ul class="gallery">
<li><a href="#nogo">01<img class="landscape" src="image1.jpg" alt="image 1" title="image 1" />&;t;/a></li>
<li><a href="#nogo">02<img class="portrait" src="image2.jpg" alt="image 2" title="image 2" />&;t;/a></li>
<li><a href="#nogo">03<img class="portrait" src="image3.jpg" alt="image 3" title="image 3" />&;t;/a></li>
<li><a href="#nogo">04<img class="landscape" src="image4.jpg" alt="image 4" title="image 4" />&;t;/a></li>
<li><a href="#nogo">05<img class="portrait" src="image5.jpg" alt="image 5" title="image 5" />&;t;/a></li>
<li><a href="#nogo">06<img class="portrait" src="image6.jpg" alt="image 6" title="image 6" />&;t;/a></li>
<li><a href="#nogo">07<img class="landscape" src="image7.jpg" alt="image 7" title="image 7" />&;t;/a></li>
<li><a href="#nogo">08<img class="landscape" src="image8.jpg" alt="image 8" title="image 8" />&;t;/a></li>
<li><a href="#nogo">09<img class="portrait" src="image9.jpg" alt="image 9" title="image 9" />&;t;/a></li>
<li><a href="#nogo">10<img class="landscape" src="image10.jpg" alt="image 10" title="image 10" />&;t;/a></li>
</ul>
</div>

Each img src has to point to a picture. The class of this picture can be portrait or landscape.