Now a day few blogger want a attractive photo album on their
blog, here is an easy to apply solution, without any javascript! It is just
CSS, and a lot 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.
Notice: if you add this to your Blog using the Blogger editor (what
I did), Blogger adds <br/>-tags where it sees new lines. These
<br/>-tags mess up the album when displayed with Firefox.
1st, 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 */
2nd, find the a: link meaning in your CSS, and add meanings 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).
3rd, 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>
Every image src has to point to a picture. The class of this
picture can be similarity or landscape.
Labels: Blogging Tips
