Scrollgalerie vertikal

Scrollgalerie für 5 bis unendlich viele Bilder

Für Sammlungen, viele Details und "Babypakete" - oder als "Cross-Promotion" für andere Artikel (Shop)

Für gemischte Bildformate, anpaßbar, Beschreibungen zum Bild, XXL ist möglich
Um diese Galerie bei eBay zu benutzen mußt du geprüftes Mitglied sein oder sonst berechtigt für Scripte.

	XXL
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: #efefef;          /* Hintergrundfarbe der Galerie */
     border: 3px double #000000;   /* auch möglich: dotted | dashed | solid | inset | outset | groove */
}
#gross {
     background: #efefef;          /* Hintergrundfarbe des großen Bildes */
      width: 420px;                /* Breite des breitesten Bildes + 20px */
      height: 410px;               /* Höhe des höchsten Bildes + 10px */
}
#scrollfenster {
     overflow:auto;
     width: 100px;                 /* Breite der Vorschaubilder + 20px für den Scrollbalken*/
     height: 390px;                /* Höhe des großen Bildes -10px */
     border: 1px solid #000000;    /* auch möglich: dotted | dashed | double | inset | outset | groove */
     padding: 5px;                 /* Abstand der Bilder zum Rand */
}


#textzelle {                          /* Textzeilenformat */
     border-top: 1px dotted #000000;  /* Rahmenstil Dicke und Farbe */
}
#bildtitel1 {
     font-family: Arial, sans-serif;  /* Schriftart */
     font-size: 75%;                  /* Schriftgröße */
     color: #000070;                  /* Schriftfarbe */
     text-align: center;              /* Textausrichtung */
}


.xxl {                                /* Format xxl Hinweis */
    text-align: center;
    font-size: 75%;
}

</style>

<!-- HTML - Beginn Galerie -->

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

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

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

<!-- Bild 2 -->
<hr><a href="#"; onclick="document.galerie1.src='http://URL - großes Bild';
  document.getElementById('bildtitel1').innerHTML=' Text zum Bild ';  return false;">
<img  border="0"  src="http://URL - Vorschaubild"  ></a>
<!-- Für XXL in neuem Fenster die folgende Zeile einfügen -->
<br><span class="xxl"><a target="_blank" href="http://URL - XXL Bild">XXL</a></span>
<!-- bis hier - bei allen Bildern möglich -->

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

<!-- Bild 4 -->
<hr><a href="#"; onclick="document.galerie1.src='http://URL - großes Bild';
  document.getElementById('bildtitel1').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 -->
<hr><a href="#"; onclick="document.galerie1.src='http://URL - großes Bild';
  document.getElementById('bildtitel1').innerHTML=' Text zum Bild ';  return false;">
<img  border="0" src="http://URL - Vorschaubild" ></a>
<!-- bis hier - und hier einfügen -->

</div>
</td></tr>

 <tr> <td id="textzelle" colspan="2">
<p id="bildtitel1">Vorschaubilder zum vergrößern klicken - javascript muß aktiviert sein</p>
</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 schwer benutzbar ist. Für größere Bilder besser die XXL Option nutzen. Für ausschließlich Querformate in der Galerie kann aber die Breite verändert werden.

xxl Links: als "Cross-Promotion" zu euren anderen Angeboten, kann hier auch der Link zu den jeweiligen Angeboten eingefügt werden.

Textzeile: hier können ausführlichere Texte zu jedem einzelnen Bild stehen - die Tabellenzelle paßt sich der Textmenge an. Es sollte aber dann etwa jeweils gleich viel sein - sonst "springt" die Galerie beim Bildwechsel (wenn ihr nicht gleichzeitig eine feste Höhe im stylesheet für die textzelle festlegt), Zeilenumbrüche mit <br> setzen.

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)