Googles Bildersuche mit CSS nachbauen
Kommentare

Googles Bildersuche bietet dem Nutzer die Möglichkeit, sich Bilder dank einer umfangreichen Ausklappfunktionalität in einer größeren Darstellung anzeigen zu lassen.

Sowas ist natürlich auch bei der Integration von Bildergalerien in die eigene Website nützlich. Dan Rose erklärt, wie sich das Layout der Google Bildersuche mit CSS nachbilden und auch in andere Formate bringen lässt – und dabei sogar leicht Responsive gestaltet werden kann.

CSS statt JavaScript

Googles Bildersuche macht sich vor allem JavaScript zu Nutze, um das ausgewählte Bild zu vergrößern. Dabei lässt sich die Struktur der Suche auf zwei divs herunterbrechen: eines beinhaltet alle Bildzellen, das andere umfasst den ausgeklappten Bereich.

Allerdings lässt sich das Layout der Google Bildersuche auch mit CSS nachbauen. Dafür werden zunächst ein .image-grid-Container und ein .image_cell-Element erstellt, wobei letzteres für jedes Bild innerhalb des Gitters dupliziert werden muss.

Die Breite jeder Bildzelle entspricht dabei 100 geteilt durch die Anzahl der Items in einer Reihe – für eine Reihe mit fünf Items ist jedes .image_cell also je 20% breit. Ebenso kommen die Identifier #close-jump-1 und #expand-jump-1 zum Einsatz, die dafür sorgen, dass der Browser automatisch zur ausgewählten Zelle springt.

Hat man das Grund-Layout in CSS definiert, können weitere Styles angewandt werden, die für eine bessere User Experience sorgen sollen. Dazu gehört beispielsweise ein nach oben zeigender Pfeil, der anzeigt, zu welchem Bild der ausgeklappte Bereich gehört, oder der Schließen-Button des ausgeklappten Bereichs. Abschließend kann mit jQuery das Verhalten beim Klicken auf jede Bildzelle und den dazugehörigen Schließen-Button definiert und mit dem Hinzufügen von Media Queries das Grid Responsive gestaltet werden.

Das ist natürlich nur ein kurzer Einblick, wie sich Googles Bildersuche fast ohne JavaScript in CSS nachbauen lässt. Den genauen Aufbau des CSS – insbesondere, was den ausklappbaren Bereich angeht – erklärt Dan Rose mit ausführlichen Codebeispielen in seinem Tutorial.

Aufmacherbild: Search key on the keyboard. Toned Image. von Shutterstock / Urheberrecht: Bloomua

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -