Kleinere Bildergalerien via css

1 elena

Hallo,
ich suche eine verständliche - möglichst deutsche - Anleitung, wie ich eine kleine Bildergalerie via css erstellen kann. Es sollen thumbnails gezeigt werden und diese sollen beim Anklicken das jeweils große Bild zeigen. Wo finde ich so etwas??

elena

2 Jörg Kruse

Hallo elena,

ich kenne leider keine solche Anleitung (vielleicht noch jemand anders).

Als GRundlage könnte aber vielleicht diese Seite auf SELFHTML weiterhelfen (insbesondere Beispiel 3):

http://aktuell.de.selfhtml.org/artikel/css/infobox/

3 Rudy

Schnell und einfach mit Lightbox oder via Jquery mit der Jquery Interface-Erweiterung Imagebox. Oder eben selbst schreiben mit Event-Zuweisung über JQuery, da ist aber etwas Materie-Kenntnis gefragt. Anleitung für letzteres kenne ich keine, und deutsch sind keine der Seiten.

4 Käptn Blaubär

hier:

.
.
.
/* Bildübersichts-Seite: */
#bilduebersicht {
  text-align: center;
  width: auto;
  margin: 1.6em auto 0.6em 0.0em;
}
#bilduebersicht img {
  width: 148px; height:111px;       /* gewünschte Auflösung eintragen */
  border-width:2px; border-style:solid; border-color:navy;
                                    /* gewünschte Werte für Rahmen eintragen */
  margin: 0 0.1em 0.29em 0.1em;
}
#bilduebersicht a:focus {background-color: #FAFFFF;}
#bilduebersicht a:hover {background-color: #FAFFFF;}
.
.
.

.
.
.
<div id="bilduebersicht">
    <a href="04-01-rhodos-hafen-mandraki.html"><img src="bilder/04-01-rhodos-hafen-mandraki-q-k.jpg" alt="die drei Windm&uuml;hlen am Hafen Mandraki, rechts die Festung Agios Nikolaos"></a>
    <a href="04-02-rhodos-hafen-mandraki.html"><img src="bilder/04-02-rhodos-hafen-mandraki-q-k.jpg" alt="die ber&uuml;hmten drei Windm&uuml;hlen am Hafen Mandraki, noch immer ohne Fl&uuml;gel"></a>
    <a href="04-03-rhodos-hafen-mandraki.html"><img src="bilder/04-03-rhodos-hafen-mandraki-q-k.jpg" alt="der Neue Markt am Hafen Mandraki, im Hintergrund der Gro&szlig;meisterpalast"></a>
    <a href="04-04-rhodos-hafen-mandraki.html"><img src="bilder/04-04-rhodos-hafen-mandraki-q-k.jpg" alt="Stadt Rhodos: die Evangelismos-Kirche am Hafen Mandraki"></a>
    <a href="04-05-rhodos-hafen-mandraki.html"><img src="bilder/04-05-rhodos-hafen-mandraki-q-k.jpg" alt="Stadt Rhodos: die Johanniter-Festung Agios Nikolaos am Hafen Mandraki"></a>
    <a href="04-06-rhodos-hafen-mandraki.html"><img src="bilder/04-06-rhodos-hafen-mandraki-q-k.jpg" alt="der Neue Markt am Hafen Mandraki, im Hintergrund der Gro&szlig;meisterpalast"></a>
    <a href="04-07-rhodos-hafen-mandraki.html"><img src="bilder/04-07-rhodos-hafen-mandraki-q-k.jpg" alt="Hirsch Elafos und Hirschkuh Elafina an der Einfahrt zum Hafen Mandraki"></a>
    <a href="04-08-rhodos-hafen-mandraki.html"><img src="bilder/04-08-rhodos-hafen-mandraki-q-k.jpg" alt="Stadt Rhodos: Teil der Festungsanlage am Hafen Mandraki"></a>
    <a href="04-09-rhodos-hafen-mandraki.html"><img src="bilder/04-09-rhodos-hafen-mandraki-q-k.jpg" alt="Stadt Rhodos: Jachten im Hafen Mandraki, im Hintergrund die drei Windm&uuml;hlen"></a>
    <a href="04-10-rhodos-hafen-mandraki.html"><img src="bilder/04-10-rhodos-hafen-mandraki-q-k.jpg" alt="Rhodos: der Neue Markt (Nea Agora) am Hafen Mandraki"></a>
</div>
.
.
.

Die Darstellung paßt sich der Auflösung bzw. der eingestellten Fensterbreite an (5 oder 4 oder 3 kleine Bilder nebeneinander).

Statt einzelner Seiten für die großen Bildern könnte man die Großbilder natürlich auch direkt verlinken.

5 elena

Danke zuerst für die Antworten!!
Ich habe zwischenzeitlich herumprobiert, Artikel gelesen und kann auch ein Ergebnis präsentieren, das meinen Vorstellungen entspricht:

http://www.anita-foernges.de/uebungssite/diashow/suedafrika_unterkuenfte/unterkuenfte.html

Die Galerie ist durch .hoverbox definiert. Nun mußte (sollte) ich noch einen Passus hinzufügen, damit auch im IE die Bilder richtig dargestellt werden, und zwar so, dass beim Drüberfahren mit der Maus die großen Bilder im Vordergrund stehen!! Würde ich den folgenden Passus weglassen, sind die größeren Bilder immer im Hintergrund:

*+html .hoverbox a {position: relative;
}
*+html .hoverbox a:hover {display: block; font-size: 100%; z-index: 1;}
*+html. hoverbox a:hover .preview {top: -38px; left: -50px;}
*+html .hoverbox li{position: static;}

*html .hoverbox a {position: relative;
}
*html .hoverbox a:hover {display: block; font-size: 100%; z-index: 1;}
*html. hoverbox a:hover .preview {top: -38px; left: -50px;}
*html .hoverbox li{position: static;}

Leider gibt mir nun der Validator
http://jigsaw.w3.org/css-validator/
Einlesefehler bei *+html ... an

Wo liegt der Fehler?? Ich habe das Ganze nach einer Internetvorlage gemacht.

elena

6 Jörg Kruse

Hallo Elena,

SELFHTML zufolge ist der Star-Plus-HTML-Hack valide - allerdings verwendet man dort eine etwas abgewandelte Form (damit Opera nicht darauf anspricht). Vielleicht probierst du es mal so:

*:first-child+html .hoverbox a {position: relative;}

Ansonsten muss man bei Verwendung von Hacks mitunter schon damit rechnen, dass der Code dann nicht mehr valide ist

7 Käptn Blaubär

Zitat von elena

... Es sollen thumbnails gezeigt werden und diese sollen beim Anklicken das jeweils große Bild zeigen ...

Für das, was Du willst, war das Wort "Anklicken" aber der falsche Ausdruck.

Nebenbei:
Bei Deiner Lösung müssen ja sofort alle Großbilder geladen werden, was die Ladezeit erheblich erhöht. Es gibt immer noch viele Gegenden ohne DSL-Verfügbarkeit in Deutschland.

nach oben

Kleinere Bildergalerien via css

Beitrag schreiben (als Gast)