Scrollgalerie horizontal

2. Scrollgalerie für 5 bis unendlich viele Bilder

Für Sammlungen, Artikel mit vielen Details, "Babypakete" und ähnliches.

Vorzugsweise für Querformate, anpaßbar, Beschreibungen zum Bild,
Um diese Galerie bei eBay zu benutzen mußt du geprüftes Mitglied sein oder sonst berechtigt für Scripte.

Vorschaubilder zum vergrößern klicken - javascript muß aktiviert sein

Der - kommentierte - Quelltext dazu

<style type="text/css">            /* in eventuell vorhandenes Stylesheet einfügen */

#scrollgalerie {
     background: ;                 /* Hintergrundfarbe falls gewünscht */
     border: 0px double #000000;   /* Wert, Stil: dotted | dashed | solid | inset | outset | groove und Farbe */
}
#gross {
     background: #efefef;          /* Hintergrundfarbe des großen Bildfeldes */
      width: 420px;                /* Breite des breitesten Bildes + 20px */
      height: 310px;               /* Höhe des höchsten Bildes + 10px */
}

#gross img {                       /* Formate des großen Bildes */
     height: 300px;                /* erzwungene Höhe - weglassen wenn alle gleich groß */
     border: 4px ridge #efefef;    /* Rahmen um das Bild */
     padding: 4px;                 /* Abstand zwischen Bild und Rahmen */
     background: #FFFFFF;          /* Hintergrund zwischen Bild und Rahmen */
}

#scrollfenster {
     overflow:auto;
     width: 420px;                 /* Breite des größten Bildes*/
     height: 83px;                 /* Höhe  -der Vorschaubilder + 23px */
     padding: 2px;                 /* Abstand der Bilder zum Rand */
     white-space: nowrap;
}

#scrollfenster img {               /* Formate der Vorschaubilder */
     height: 60px;                 /* erzwungene Höhe - weglassen wenn alle gleich groß */
     border: 2px outset  #efefef;  /* Rahmen um das Vorschaubild */
}


#bildtitel1 {                         /* Textzeilenformat */
     font-family: Arial, sans-serif;  /* Schriftart */
     font-size: 75%;                  /* Schriftgröße */
     color: #000070;                  /* Schriftfarbe */
     text-align: center;              /* Textausrichtung */
}

</style>

<!-- HTML - Beginn Galerie -->

<table id="scrollgalerie" border="0" cellspacing="2" cellpadding="0" align="center">
<tr><td id="gross" align="center">
<!-- großes Startbild - es muss nicht das erste sein -->
<img src="http://URL" name="galerie2" alt="">
</td></tr>

<tr> <td>
<p id="bildtitel2">Vorschaubilder zum vergrößern klicken - javascript muß aktiviert sein</p></td></tr>

<tr><td align=center >  <div id="scrollfenster">

<!-- Bild 1 -->
<a href="#"; onclick="document.galerie2.src='http://URL - großes Bild';
  document.getElementById('bildtitel2').innerHTML=' Text zum Bild ';  return false;">
<img  border="0" src="http://URL - Vorschaubild"></a>

<!-- Bild 2 -->
<a href="#"; onclick="document.galerie2.src='http://URL - großes Bild';
  document.getElementById('bildtitel2').innerHTML=' Text zum Bild ';  return false;">
<img  border="0"  src="http://URL - Vorschaubild"  ></a>

<!-- Bild 3 -->
<a href="#"; onclick="document.galerie2.src='http://URL - großes Bild';
  document.getElementById('bildtitel2').innerHTML=' Text zum Bild ';  return false;">
<img  border="0" src="http://URL - Vorschaubild"  ></a>

<!-- Bild 4 -->
<a href="#"; onclick="document.galerie2.src='http://URL - großes Bild';
  document.getElementById('bildtitel2').innerHTML=' Text zum Bild ';  return false;">
<img  border="0" src="http://URL - Vorschaubild"  ></a>

<!-- Bild 5 für weitere Bilder diesen Abschnitt kopieren und anfügen -->
<a href="#"; onclick="document.galerie2.src='http://URL - großes Bild';
  document.getElementById('bildtitel2').innerHTML=' Text zum Bild ';  return false;">
<img  border="0" src="http://URL - Vorschaubild" ></a>
<!-- bis hier - und hier einfügen -->

</div>
</td></tr>
</table>
<!-- Galerie Ende -->

Rot markiert sind Kommentare, die nicht angezeigt werden - ihr könnt sie auch aus dem Quelltext entfernen (einschließlich der /* */ bzw. der )
Vorsicht mit " " | ' ' | ; | bei Veränderungen.

Hinweise

Größen: die Galerie ist für das eBay Standardformat von 300 x 400 Pixeln gemacht. Die Gesamthöhe solltet ihr nicht ändern, da bei kleinen Bildschirmauflösungen (800x600) die Galerie sonst nicht benutzbar ist (entweder das Bild ist nicht zu sehen oder der Scrollbalken kann nicht erreicht werden). Querformate sind also angeraten - auch wenn ich hier im Beispiel die Hochformate mit HTML auf die passende Größe "gezwungen" habe. Die Breite kann aber verändert werden - zum Beispiel wenn du ungewöhnlich breite Formate hast.

Textzeile: hier können Texte zu jedem einzelnen Bild stehen - um die Gesamthöhe nicht zu verändern sollte es nur eine Zeile sein.

Bilderanzahl: theoretisch ist die Zahl unbegrenzt - aber auch 100 Vorschaubilder mit je 2,5kb summieren sich zu einer schon erheblichen Ladezeit. Die großen Bilder werden erst geladen wenn sie aufgerufen werden - für langsame Internetverbindungen kann man einen entsprechenden Hinweis einfügen, daß dies jeweils etwas dauert.

Javascript: es reicht nicht, daß du berechtigt bist js zu benutzen - der Besucher der Seite muß es auch im Browser aktiviert haben - alle die es abgeschaltet haben sehen nur das Startbild. Den Hinweis solltest du also nicht entfernen - vor allem wenn du Teile der Beschreibung als Bildunterschrift verwendest. (Und natürlich solltest du überlegen ob du auf diese - noch kleine - Gruppe verzichten willst)