mister-foto.eu - Foto Skripte - Photo Strip Gallerie

#1 Lorem ipsum dolor sit amet.
#2 Vestibulum dapibus posuere.
#3 Curabitur vel dui. Donec.
#4 Aliquam justo nulla, sagittis.
#5 Ipsum, feugiat a.
#6 Nulla iaculis gravida turpis.
#7 Mauris id ante.

Die Gesamtbreite der Gallerie ist hier wegen der linken und rechten Blöcke auf 500 px beschränkt, lässt sich aber ohne weiteres an eigene Vorstellungen anpassen. Hierzu einfach die beiden "width:500px;" Werte ändern.

<!-- CSS fuer Bildergallerie -->
<style type="text/css">
#photo_strip {width:500px; margin-left:15px;}
#container {margin:0; padding:0; width:500px; height:430px; overflow:auto; color:#222; background:#fff;}
#container ul {margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;}
#container ul li {display:table-cell; padding:0 15px; background:#fff; border-bottom:1px solid #888; vertical-align:top;}
#container ul li img {border:1px solid #555; margin: 30px 0 10px 0;}
#photo_strip h1 {text-align:center; padding:0; margin:0; width:500px; height:38px; line-height:35px; color:#555; font-weight:normal; font-size:20px; border-bottom:1px solid #888;}
#container p {margin:0; padding:5px 0; font-size:11px;}
</style>

<!--[if lte IE 7]>
<style>
#container {
width:500px;
scrollbar-arrow-color: #eee;
scrollbar-3dlight-color: #888;
scrollbar-highlight-color: #eee;
scrollbar-face-color: #888;
scrollbar-shadow-color: #eee;
scrollbar-darkshadow-color: #888;
scrollbar-track-color: #fff;
}
#container ul li {display:inline; zoom:1; height:390px;}
* html #container {height:470px; he\ight:430px;}
</style>
<![endif]-->

<!-- HTML Code fuer Bildergallerie -->

<div id="container" style="border: 1px solid black">
<ul>
<ul>
<li><img src="http://www.url_zum_bild_1.de/bild001.png" alt="" title="" /><p>#1 Lorem ipsum dolor sit amet.</p></li>
<li><img src="http://www.url_zum_bild_2.de/bild002.png" alt="" title="" /><p>#2 Vestibulum dapibus posuere.</p></li>
<li><img src="http://www.url_zum_bild_3.de/bild003.png" alt="" title="" /><p>#3 Curabitur vel dui. Donec.</p></li>
<li><img src="http://www.url_zum_bild_4.de/bild004.png" alt="" title="" /><p>#4 Aliquam justo nulla, sagittis.</p></li>
<li><img src="http://www.url_zum_bild_5.de/bild005.png" alt="" title="" /><p>#5 Ipsum, feugiat a.</p></li>
<li><img src="http://www.url_zum_bild_6.de/bild006.png" alt="" title="" /><p>#6 Nulla iaculis gravida turpis.</p></li>
<li><img src="http://www.url_zum_bild_7.de/bild007.png" alt="" title="" /><p>#7 Mauris id ante.</p></li>
</ul>
</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:
Bildvorlage mit Filmstreifen erstellt.