einfache Foto-Galerie
Fotovergrößerung durch Mausberührung
dieser Galerie liegt die Simplest photograph gallery von CSSplay zugrunde
Sie kann mit dem folgenden Quelltext an jede gewünschte Stelle in der Auktionsbeschreibung eingefügt werden, nachdem die eigenen Bildadressen eingesetzt wurden (und evtl. Alternativtext und Galerieüberschrift angepasst wurden):
<style type="text/css">
#container
{width: 750px; margin: 50px auto; font-family: Verdana; color: #505050;}
#gallery ul
{list-style: none; padding: 0; margin: 0; width: 180px; position: relative; float: right;}
#gallery ul li
{display: inline; width: 52px; height: 52px; float: left; margin: 0 0 5px 5px;}
#gallery ul li a
{display: block; width: 50px; height: 50px; text-decoration:none; border: 1px solid #000;}
#gallery ul li a img
{display: block; width: 50px; height: 50px; border: 0;}
#gallery ul li a:hover
{white-space: normal; border-color: #ddd;}
#gallery ul li a:hover img
{position: absolute; right: 185px; top: 0; width: auto; height :auto; border: 1px solid #000;}
h1
{text-align: left; font-weight: normal; font-size:1.5em; border-bottom: 1px solid #888; padding-bottom: 1em; margin-bottom: 1em;}
</style>
<div align="center">
<div id="container">
<h1>einfache Foto-Galerie: Titel</h1>
<p style="text-align: right; font-size: 0.7em; margin-top: -1.9em;">Fotovergrößerung durch Mausberührung</p>
<div id="gallery">
<ul>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
</ul>
</div><!-- id="gallery" -->
</div><!-- id="container" -->
</div><!-- "center" -->
#container
{width: 750px; margin: 50px auto; font-family: Verdana; color: #505050;}
#gallery ul
{list-style: none; padding: 0; margin: 0; width: 180px; position: relative; float: right;}
#gallery ul li
{display: inline; width: 52px; height: 52px; float: left; margin: 0 0 5px 5px;}
#gallery ul li a
{display: block; width: 50px; height: 50px; text-decoration:none; border: 1px solid #000;}
#gallery ul li a img
{display: block; width: 50px; height: 50px; border: 0;}
#gallery ul li a:hover
{white-space: normal; border-color: #ddd;}
#gallery ul li a:hover img
{position: absolute; right: 185px; top: 0; width: auto; height :auto; border: 1px solid #000;}
h1
{text-align: left; font-weight: normal; font-size:1.5em; border-bottom: 1px solid #888; padding-bottom: 1em; margin-bottom: 1em;}
</style>
<div align="center">
<div id="container">
<h1>einfache Foto-Galerie: Titel</h1>
<p style="text-align: right; font-size: 0.7em; margin-top: -1.9em;">Fotovergrößerung durch Mausberührung</p>
<div id="gallery">
<ul>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
<li><a href="#nogo"><img src="Bildadresse" alt="Alternativtext"></a></li>
</ul>
</div><!-- id="gallery" -->
</div><!-- id="container" -->
</div><!-- "center" -->
<!-- danke für das Gallery-script an: http://www.cssplay.co.uk/menu/photo_simple -->
für beliebig viele Fotos auch verschiedener Größe.
Optisch schöner finde ich es aber, wenn die Fotos etwa gleich hoch sind.
Diese Galerie enthält Bilder bis ca.333px Höhe.
HTML-Kundige können natürlich die Galeriemaße, Abstände, Schrift, Farben, Hintergrund ... weiter anpassen.
Es können beliebig viele Bilder eingfügt werden.
