Website selber erstellen - Tools, Widgets, Zubehör
Slideshow / Bildergalerie Variante 4
Praktisch eine Kombination der Varianten 2 und 3. Diesmal sind die Grafiken als eine Reihe von Thumbnails angeordnet, bei denen per Klick direkt zum jeweiligen Bild gesprungen wird, das aber in einem separaten Bereich angezeigt wird. Auch hier wir nur das gleiche Script wie in den Varianten 1 und 2 benutzt, nur nicht alle Funktionen.
 |
 |
 |
|  |
|
|
|
|
|
|
|
|||
Im Code findet man demzufolge jetzt zwei Tabellen. Die erste nimmt die Thumbnails auf. Dabei werden die Bilder bereits in Originalgröße geladen und per width und height-Angaben angepasst. Durch height="auto", bleibt das Originalseitenverhältnis der Bilder bestehen. Bei einer festen Angabe für height würden die Bilder sonst verzerrt. Gleichgroße Bilder wären optisch zwar besser, aber in der Praxis hat man oft quer- und hochformatige Bilder gemischt.
Anstelle der input-Button aus Beispiel 2, wurde diesmal in Tabelle2 die erste Zeile in drei Spalten eingeteilt und Grafiken als Button angezeigt, die wie die input-Button auch, per onklick() das nächste Bild aufrufen.
Genauso wurde den Thumbnails per onclick-Methode der Aufruf des jeweiligen Bildes zugeordnet.
Zusätzlich wurde eine Klasse imgbox definiert und zugewiesen. Ob man die rechts/links-Button und die Anzeige der Bildnummer verwendet oder weglässt, ist natürlich Geschmackssache.
<table align="center" border="6" bordercolor="#888888" >
<tr>
<td class="imgbox"><img src="../katzen/amor4wochen.jpg" width="50px" height="auto" onClick="loadpic(0)"></td>
<td class="imgbox"><img src="../katzen/andy4wochen.jpg" width="50px" height="auto" onClick="loadpic(1)"></td>
<td class="imgbox"><img src="../katzen/artur4wochen.jpg" width="50px" height="auto" onClick="loadpic(2)"></td>
<td class="imgbox"><img src="../katzen/aron4wochen.jpg" width="50px" height="auto" onClick="loadpic(3)"></td>
<td class="imgbox"><img src="../katzen/annabell4wochen.jpg" width="50px" height="auto" onClick="loadpic(4)"></td>
<td class="imgbox"><img src="http://../katzen/amor4wochen.jpg" width="50px" height="auto" onClick="loadpic(5)" ></td>
</tr>
</table>
<br><br>
<table align="center" border="2" rules="none" bordercolor="#aaaaaa" bgcolor="#cccccc" style="width:340px; height:300px;" >
<tr height="100%">
<td>
<img src="http://selber-machen-homepage.de/tools-widgets/buttonlinks.png" onClick="imgback()";>
</td>
<td width="100%">
<div align="center">
<img name="image" width="auto" height="auto" align="center" valign="center" src="http://selber-machen-homepage.de/katzen/amor4wochen.jpg">
</div>
</td>
<td style="background-image:url(../tools-widgets/buttonrechts.png)" width="10%"></td>
<td>
<img src="http://selber-machen-homepage.de/tools-widgets/buttonrechts.png" onClick="imgvor()">
</td>
</tr>
<tr>
<td colspan="3" border="0">
<p id="bildnummer" align="center">
<script>
document.write(bild)
</script>
</p>
</td>
</tr>
</table>
Diesen Codeabschnitt mit der style-Anweisung müsst ihr zusätzlich ebenfalls im Headbereich ablegen oder, wenn vorhanden, in eure eigene CSS-Datei integrieren. Man könnte diese Formatierungen natürlich auch direkt im <td>-Tag definieren, aber das würde dann langsam unübersichtlich. :)
<style type="text/css">
.imgbox {width:54px; height:64px; background:#cccccc; text-align:'center'; vertical-align:'center';}
.imgbox:hover {background:#555; }
</style>
Alternativ kann man natürlich den Bildwechsel auch gleich beim Überstreichen der Thumbnails starten. Dann braucht man nur statt der onclick-Methode, wie in Variante 3 mit der onmouseover-Methode den Bildwechsel aufrufen. Das sieht dann so aus:
|
|
|
| |
|
|
|
|
|
|
|
|
|||
Und lässt man noch die vor- und zurück-Button und die Anzeige der Bildnummer weg, wird die Tabelle für die Bildausgabe richtig klein.
<table align="center" border="2" rules="none" bordercolor="#aaaaaa" bgcolor="#cccccc" style="width:340px; height:300px;" >
<tr height="100%">
<td width="100%">
<div align="center">
<img name="image" width="auto" height="auto" align="center" valign="center" src="http://selber-machen-homepage.de/katzen/amor4wochen.jpg">
</div>
</td>
<td style="background-image:url(../tools-widgets/buttonrechts.png)" width="10%"></td>
</tr>
</table>
Wie man sieht, ist so eine Bildergalerie also ganz einfach und das meiste eigentlich dann nur noch eine Frage der Layoutgestaltung. Also nur noch etwas Kreativität und CSS.