mister-foto.eu - Foto Skripte - Simple CSS Photo-Album

01
02 $Bild 32\$
03
04
05
06
07

Das erste Bild ist im CSS Code als background angegeben, da dies gleichzeitig als Hintergrund dient. Das Format der Bilder (hoch, quer) muß über den HTML Code angegeben werden. class="landscape" (Querformat) oder class="portrait" (Hochformat).

<!-- CSS fuer Bildergallerie -->
<style type="text/css">
/* default link style - needed to make the :active work correctly in IE */
a, a:visited, a:hover, a:active {
color:#000;
}
/* style the outer containing div to fit the landscape, portrait and buttons */
#album {
width:400px; 
height:420px; 
background:#eee url(http://www.url_zum_bild_1.de/bild001.png) 0 60px no-repeat;
border:1px solid #aaa;
margin:0 auto;
}
/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
.gallery {
padding:0; 
margin:400px 0 0 0; 
list-style-type:none; 
position:relative; 
width:400px;
}
/* remove the default image border */
.gallery img {
border:0;
}
/* make the list horizontal */
.gallery li {
float:left;
}
/* style the link text to be central in a surrounding box */
.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;
}
/* position the images using an absolute position and hide them from view */
.gallery li a img {
position:absolute; 
top:-400px; 
left:0; 
visibility:hidden; 
border:0;
}
/* fix the top position for the landscape images */
.gallery li a img.landscape {
top:-340px;
}
/* fix the left position for the portrait images */
.gallery li a img.portrait {
left:0;
border-left:50px solid #eee;
border-right:50px solid #eee;
}
/* style the hover background color for the text boxes */
.gallery li a:hover {
background:#ddd;
}
/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
background:#444; 
color:#fff;
}
/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
visibility:visible;
}
</style>

<!-- HTML Code fuer Bildergallerie -->

<div id="album">
<ul class="gallery">
<li><a href="#nogo">01<img class="landscape" src="http://www.url_zum_bild_2.de/bild002.png" alt="Bild 2" title="Bild 2" /></a></li>
<li><a href="#nogo">02<img class="landscape" src="http://www.url_zum_bild_3.de/bild003.png" alt="Bild 3" title="Bild 3\" /></a></li>
<li><a href="#nogo">03<img class="landscape" src="http://www.url_zum_bild_4.de/bild004.png" alt="Bild 4" title="Bild 4" /></a></li>
<li><a href="#nogo">04<img class="landscape" src="http://www.url_zum_bild_5.de/bild005.png" alt="Bild 5" title="Bild 5" /></a></li>
<li><a href="#nogo">05<img class="landscape" src="http://www.url_zum_bild_6.de/bild006.png" alt="Bild 6" title="Bild 6" /></a></li>
<li><a href="#nogo">06<img class="landscape" src="http://www.url_zum_bild_7.de/bild007.png" alt="Bild 7" title="Bild 7" /></a></li>
<li><a href="#nogo">07<img class="portrait" src="http://www.url_zum_bild_8.de/bild_h.png" alt="Bild 8" title="Bild 8" /></a></li>
</ul>
</div>

Als Vorlage verwendete Bilder für diese Gallerie (Rechtsklick -> Grafik speichern unter):

Querformatvorlage, im weißen Bereich wird das eigene Bild eingefügt (max. 362x208 px).

Hochformatvorlage der einzelnen Bilderrahmen, im weißen Bereich wird das eigene Bild eingefügt (max. 208x362 px).

Autor: Stu Nicholls

Website: cssplay.co.uk

Änderungen:
CSS an Auflösung von 400x300px angepasst.
Bildvorlage mit Filmstreifen erstellt.