Website selber erstellen - Tools, Widgets, Zubehör
Slideshow / Bildergalerie Variante 5 - Thumbnails umschliessen Bildanzeige
So hier eine kleine Variante für den Fall das man ein paar Bilder mehr hat.
 |
 |
 |
 |
 |
|
|
|
|
|||
|
|
||||
|
|
||||
|
|
||||
|
|
|
|
|
|
Praktisch nur eine andere Version der reduzierten Variante 4. (Also Script Variante4) Wieder wird im script nur die loadpic()-Funktion benötigt. Diesmal wurden die beiden Tabellen zusammengelegt. Die Tabelle mit den Thumbnails aus Variante4 bildet jetzt die oberste Reihe, weitere Bilder wurden um das Ausgabefenster gruppiert. Natürlich kann man je nach Anzahl der Bilder auch noch mit der Größe des Ausgabefensters und der Thumbnails spielen oder auch die unterste Bildreihe weglassen.
Grundsätzlich ergibt sich die Anzahl der Bilder aus:
Anzahl belegter Seiten x Thumbs/Seite + Anzahl belegter Ecken
In der Tabelle wurde in der zweiten Zeile die zweite Zelle mit rowspan und colspan="4" auf 4 Spalten und Reihen erweitert und diese verbunden. Damit sind die Spalten 2-5 in den Reihen 2-5 durch das Ausgabefenster belegt. In den Zeilen 2-5 werden demzufolge nur noch die verbliebenen 2 Zellen (1 und 6) mit Bildern belegt. Zeile 6 bekommt im Beispiel wieder alle sechs Spalten mit Bildern belegt.
Hier der HTML-Code. Zum Zweck der besseren Lesbarkeit habe ich die originalen Bild-Url durch Platzhalter ersetzt. In der Praxis ist diese also immer zu ersetzen. Natürlich müssen alle URL's auch im Script im Head ergänzt werden und beim Aufruf der loadpic()-Funktion ist jeweils die richtige Nummer entsprechend der Zuordnung der Bilder im Script zu ändern. (Nicht vergessen das array im Script beginnt mit Null zu zählen)
<table width="600px" height="90px" align="center" border="6" rules="none" bordercolor="#888888">
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(0)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(1)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(2)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(3)"> </td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(4)"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(5)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(1)" ></td>
<td colspan="4" rowspan="4" bgcolor="000000">
<div align="center">
<img name="image" width="250" height="auto" align="center" valign="center" src="Bild-URL">
</div>
</td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(4)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(2)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(3)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(3)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(2)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(4)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(1)" ></td>
</tr>
<tr>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(0)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(1)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(2)" ></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(3)" </td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(4)"></td>
<td class="imgbox"><img src="Bild-URL" width="70px" height="auto" onmouseover="loadpic(5)" ></td>
</tr>
</table>