Galerie

Mehrere Bilder

Das Core-Element „Galerie“ mit der Standardansicht und Varianten über „Individuelles Template“ (zugeklappt unter „Template-Einstellungen“). Unter „Aussehen der Galerie“: Abstand zwischen den Bildern, Überlagerung und Bewegung beim Überfahren, erstes Bild in voller Breite, Bildunterschriften ausblenden.

Standardgalerie

Ein Raster nach „Vorschaubilder pro Reihe“ (hier 3), „Großansicht“ beim Klick. Dazu „Erstes Bild in voller Breite“, „Bewegung beim Überfahren“: leicht vergrößern und „Abstand zwischen den Bildern“: S. Bildgröße „Inhaltsbild – Querformat (3:2)“.

Variante „Mauerwerk“ (masonry)

Spalten, die Bilder ungeschnitten untereinander – für Hoch-, Quer- und quadratische Formate gemischt. „Vorschaubilder pro Reihe“ = Spalten ab 768 px (darunter eine, ab 576 px zwei). Die Reihenfolge läuft spaltenweise von oben nach unten.

Die Bildgröße muss ohne Beschnitt sein, sonst sind alle Bilder gleich hoch: „Inhaltsbild – ohne Zuschnitt“.

Variante „Scrollband“ (scroller)

Eine Reihe zum Wischen oder seitlich Scrollen, ohne Skript. „Vorschaubilder pro Reihe“ = sichtbare Bilder ab 768 px (darunter eins, ab 576 px zwei), dazu ein Viertel des nächsten – so sieht man, dass es weitergeht.

Variante „Logo-Leiste“ (logos)

Logos von Partnern oder Kunden in einer zentrierten Reihe, alle gleich hoch und grau – in Farbe, sobald die Maus darauf zeigt oder die Tastatur ein Logo ansteuert. Bildgröße „Logo – ohne Zuschnitt“; „Vorschaubilder pro Reihe“ spielt keine Rolle, die Reihe bricht um, wo nötig. Der Firmenname gehört in den Alternativtext der Datei, Bildunterschriften zeigt die Leiste nicht. Ein Logo verlinkt, wenn in den Metadaten der Datei ein Link steht; „Großansicht“ bleibt aus.

Am besten eignen sich SVG oder PNG mit durchsichtigem Grund und ohne Rand – ein Logo mit viel Weißraum in der Datei wirkt in der Leiste winzig. Die Logos hier sind Platzhalter: im Kundenprojekt durch die echten ersetzen.

Variante „Logo-Laufband“ (logo_ticker)

Die Logo-Leiste als langsam laufendes Band ohne Ende. Es hält an, solange die Maus darauf zeigt oder ein Logo den Tastaturfokus hat, und mit dem Schalter „Laufband anhalten“ darunter. Wer am Gerät „Bewegung reduzieren“ eingestellt hat, sieht die ruhige Logo-Leiste. Bildgröße und Dateien wie bei der Logo-Leiste.

Variante „Mosaik“ (mosaic)

Ein festes Kachelmuster: ein großes Bild (2 × 2) zwischen kleinen, abwechselnd links und rechts. Drei Spalten ab 768 px, darunter zwei; mit 3, 6, 9 … Bildern ohne Lücke. „Vorschaubilder pro Reihe“ spielt keine Rolle. Bildgröße „Inhaltsbild – Querformat (3:2)“.

Variante „Filmstreifen“ (filmstrip)

Ein großes Bild, darunter die übrigen als Vorschaubilder – ein Klick zeigt sie groß. Bildgröße im Querformat mit Beschnitt (hier „Inhaltsbild – breit (2:1)“), sonst springt die Höhe von Bild zu Bild.

Variante „Vorher / Nachher“ (before_after)

Zwei Bilder übereinander, ein Schieber gibt das zweite frei – für Renovierungen, Gärten, Restaurierungen. Bild 1 und 2 bilden ein Paar, 3 und 4 das nächste; beide Bilder eines Paars im selben Format, also eine Bildgröße mit Beschnitt. Mit Maus, Finger und Pfeiltasten bedienbar.

Die zwei Fotos zeigen dieselbe Laseranlage vor dem Schnitt und mitten im Funkenflug, aber nicht vom selben Standpunkt aus. Für echte Vorher-Nachher-Bilder beide Fotos vom selben Standpunkt aufnehmen, am besten mit Stativ – sonst springt das Motiv an der Trennlinie. Bildgröße hier „Panorama (2:1)“.

Variante „Slider“ (slider)

Ein Bild je Folie, mit Pfeilen und Punkten; „Vorschaubilder pro Reihe“ gilt hier nicht. Bildgröße hier „Panorama (2:1)“.

Variante „Slider-Grid“ (slider_grid)

Mehrere Bilder je Folie: ab 1200 px so viele wie „Vorschaubilder pro Reihe“ (hier 3), darunter zwei, unter 768 px eins.