Thumbnails in Reihe mit maximaler Breite

[blabla333]

Es will mir einfach nicht gelingen...

Ich habe einen div-Container, welcher ein Hauptbild beinhaltet (z.B. 400px Breite). Darunter sollen nun eine Reihe von Thumbnails dargestellt werden (im Sinne einer Galerie). Diese sollen in einem "Streifen" unter dem Bild dargestellt werden, wobei der Streifen so breit ist wie das Hauptbild (hier 400px). Wenn mehr Thumbnails vorliegen, dann sollte man per Klick auf einen Pfeil weiter scrollen können...

Bin für jeden Tipp dankbar!

 

[Bennyville]

Könntest du deinen Ansatz mal zeigen?

Die Sache mit dem Pfeil wird allerdings alleine mit CSS nichts. Da bräuchtest du mind. JS.

 

[blabla333]

<div class=wrap>
<div class=bildersatz_gross></div>
<div class=wrap_zeile>
<div class=bildersatz_tn></div>
<div class=bildersatz_tn></div>
<div class=bildersatz_tn></div>
<div class=bildersatz_tn></div>
<div class=bildersatz_tn></div>
<div class=bildersatz_tn></div>
</div>
</div>

.bildersatz_gross {
background-color: red;
width: 400px;
height: 300px; }
.wrap_zeile {
width: 400px; }
.bildersatz_tn {
background-color: red;
width: 150px;
height: 50px;
display: block;
float: left;
}

Die div-Contaier "bildersatz_*" sind eigentlich Bilder. Ich habe das jetzt nur so zur Darstellung verwendet...

 

[Bennyville]

Kleiner Tipp: „zum Zeigen“ kann man placehold.it gut verwenden. Z. B.:

<img src="http://www.placehold.it/60x50" width=60" height="50" />

die Größe des Platzhalters kann man in der URL anpassen.

Wie gesagt, zum „blättern“ benötigst du wahrscheinlich JS.

Zum Rest:
Ich denke dir fehlt noch das margin-right bei den Thumbnails. Ansonsten sieht das doch, bis auf Einrückung, ganz ordentlich aus.
Die Pfeile könntest du zusätzlich in einen Div-Container a-Element innerhalb der „wrap_zeile“ packen und absolut positionieren.

 

[blabla333]

Cool, das mit placehold.it kannte ich noch nicht. Danke.

Mein Problem ist, dass ich nur eine einzige Zeile haben möchte, d.h. wenn mehr Thumbnails vorhanden sind, als die eigentliche Breite des Hauptbildes es zulässt, dann wird derzeit der Rest einfach in der nächsten Zeile dargestellt. Ich möchte aber, dass es praktisch abgeschnitten ist, d.h. man muss eben scrollen.
Das möchte ich danach mit dem Pfeil machen - und ja, mit JS. Aber mein Grundgerüst stimmt ja noch gar nicht.

 

[Banana_Jones]

Beispielsweise so: http://jsfiddle.net/uS5nu/

 

[blabla333]

Super. Genau so. Danke...

 

[Bennyville]

Ich hätte auch noch was:
http://jsfiddle.net/J3e7e/

So passen sich die Thumbnails automatisch an die Größe des großen Bildes an. Funktioniert mit float: left; oder display: inline-block;. Die weiteren Thumbnails daneben werden „abgeschnitten“ und die Blätterfunktion kann mit JS (und den Pfeilen) dann über die left/right-Eigenschaften des .wrap_images animiert werden.