Bildergalerie: Slideshow mit Vorschaubildern

WP-ImmoMakler stellt seit Version 5.60 eine geteilte Galerie-Bibliothek bereit, die auf Swiper und Lightgallery basiert. Sie löst die frühere galleria.io-Slideshow ab und bietet vier Layout-Varianten, ein einheitliches Bedienkonzept auf Mobilgeräten und konsistente Anpassungsmöglichkeiten über den Customizer.

Galerie-Typ aktivieren

Navigieren Sie im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Customizer → Bildergalerie → Präsentation der Immobilienbilder und wählen Sie Slideshow mit Vorschaubildern.

Customizer-Auswahl Präsentation der Immobilienbilder mit gewählter Option Slideshow mit Vorschaubildern

Folgende Optionen erscheinen anschließend in der Sektion Bildergalerie.

Bildauswahl

Bestimmt, welche Bilder der Immobilie in der Galerie erscheinen. Grundrisse werden beim Import (z. B. über OpenImmo) automatisch als solche erkannt und lassen sich hier getrennt behandeln.

Wert	Beschreibung
Alle Bilder (Standard)	Fotos und Grundrisse werden gemeinsam angezeigt.
Nur Grundrisse	Es werden ausschließlich die Grundriss-Bilder angezeigt.
Ohne Grundrisse	Es werden nur die Fotos angezeigt, Grundrisse bleiben ausgeblendet.

Die Option wirkt sowohl für die Slideshow- als auch für die statische Galerie. Sie entspricht der Bildauswahl, die auch in den Block-/Theme-Builder-Integrationen (Gutenberg, Elementor, Divi, WPBakery, Bricks) zur Verfügung steht — so können Sie etwa an einer Stelle die Fotos und an anderer Stelle nur die Grundrisse einer Immobilie zeigen. Im WP-ImmoMakler Skin können die Grundrisse außerdem unbeschnitten in einer eigenen Box unter den Kontaktdaten erscheinen – siehe Grundrisse in eigener Box.

Customizer-Auswahl Bildauswahl mit Alle Bilder, Nur Grundrisse und Ohne Grundrisse

Legt fest, ob ein Klick auf ein Foto der Galerie die Großansicht über der Seite öffnet. Standardmäßig aktiviert.

Ist die Option ausgeschaltet, sind die Bilder der Galerie nicht mehr anklickbar: es öffnet sich keine Großansicht, der Mauszeiger zeigt keine Lupe mehr, und das Skript der Großansicht wird gar nicht erst geladen.

Die Option wirkt für die Slideshow- und für die statische Galerie.

Klick auf ein Foto in den Page Buildern

In den Galerie-Elementen der Page Builder (Block-Editor, Elementor, Divi, WPBakery, Bricks, Enfold) heißt die Einstellung Klick auf ein Foto und bietet je Galerie eine dritte Möglichkeit:

Großansicht öffnen — die Voreinstellung, entspricht der eingeschalteten Lightbox.
Zur Immobilie — ein Klick auf ein Foto führt zur Detailseite der Immobilie. Gedacht für eine Galerie, die Sie in einer Immobilienliste platzieren, etwa im Loop Grid von Elementor, in einer Bricks-Abfrageschleife, in einem Query Loop des Block-Editors oder auf einer Vorlagenseite für die Listenansicht. Die Galerie wird damit anklickbar wie die Bilder in der Listenansicht von WP-ImmoMakler. Die Pfeile und die Vorschauleiste bleiben der Bildnavigation vorbehalten — nur ein Klick auf das große Bild wechselt zur Immobilie. Bei Referenzobjekten bleiben die Fotos unverlinkt, solange die Einstellung Detailansicht für Referenzobjekte verlinken ausgeschaltet ist.
Nichts — die Fotos sind nicht anklickbar.

Weil ein Klick nur eine Sache auslösen kann, ist dies eine einzige Auswahl und kein Satz einzelner Schalter.

Layout

Die Option Layout bestimmt die grundlegende Anordnung der Galerie. Die Benennung beschreibt dabei die Form der Galerie, nicht die Anordnung der Vorschauleiste:

Layout	Beschreibung
Vertikal	Hauptbild oben, Vorschauleiste darunter (Standard). Die Galerie ist insgesamt hoch/gestapelt — wirkt natürlich in schmalen Spalten und unter dem Header.
Horizontal	Hauptbild links, Vorschauleiste rechts daneben. Die Galerie ist insgesamt breit — passt zu Hero-Bereichen und Desktop-Templates mit voller Breite.
Ohne Vorschaubilder	Nur das Hauptbild mit Pfeil-Navigation. Geeignet, wenn die Galerie unter einer schmalen Spalte oder in einem Listing platziert wird.
Karussell	Hauptbild auf voller Breite mit angeschnittenen Vorder- und Hinterbildern (Peek-Effekt). Verwendet eine feste Höhe statt eines Seitenverhältnisses.

Aufgeklappte Customizer-Auswahl Layout mit den vier Optionen der Slideshow

Pfeil-Buttons an den Vorschaubildern anzeigen

Aktiviert zusätzliche Pfeil-Buttons zum Blättern durch die Vorschauleiste: oben/unten beim horizontalen Layout, links/rechts beim vertikalen Layout. Praktisch, wenn die Vorschauleiste mehr Bilder enthält als gleichzeitig sichtbar sind.

Bilder automatisch wechseln (Autoplay)

Wenn aktiviert, wechseln die Bilder selbständig im eingestellten Sekundentakt. Beim Klick oder Wischen wird der Autoplay pausiert.

Autoplay-Geschwindigkeit (Sekunden): Wartezeit zwischen den Bildwechseln. Standard 4 Sekunden, Bereich 1–30.

Customizer-Optionen Bilder automatisch wechseln und Autoplay-Geschwindigkeit (Sekunden)

Übergangseffekt

Bestimmt, wie das Hauptbild beim Wechsel animiert wird.

Wert	Beschreibung
Schieben	Das Hauptbild wandert horizontal zum nächsten Bild (Standard). Klassischer Slider-Effekt.
Überblenden	Das Bild geht direkt in das nächste über, ohne dass zwischendurch der Hintergrund durchscheint. Wirkt ruhiger und eignet sich für Galerien, in denen die Aufmerksamkeit auf der Bildwirkung selbst liegen soll, statt auf der Slider-Mechanik.
Aus- und Einblenden	Das Bild blendet ganz aus, erst dann blendet das nächste ein. Dazwischen ist kurz der Hintergrund der Galerie zu sehen — ein deutlicher Schnitt zwischen den Bildern.

Übergangsdauer (Millisekunden)

Wie schnell der Übergang zwischen den Bildern abläuft. Standardwert: 400 ms, Bereich 100–2000 ms.

Kleinere Werte (100–200 ms) wirken sehr direkt — passend für schnelle, energische Slideshows.
Größere Werte (≥ 800 ms) wirken weicher und ruhiger — geeignet in Kombination mit Autoplay und/oder dem Überblenden-Effekt.

Die Einstellung gilt sowohl für den Bildwechsel als auch für das Mitscrollen der Vorschauleiste beim Klick auf eine Vorschaubild — beide animieren mit demselben Tempo, sodass kein „Springen + Nachziehen”-Effekt entsteht.

Seitenverhältnis Hauptbild / Seitenverhältnis Vorschaubilder

Steuern das Seitenverhältnis (Aspect Ratio) der jeweiligen Bildbereiche.

Wert	Beschreibung
16:9	Breitformat — Standard für Diashows und Hero-Bilder.
3:2	Klassisches Foto-Format.
4:3	Standardformat.
1:1	Quadrat.
Goldener Schnitt (1,618:1)	Natürliche, ästhetisch ausgewogene Proportion.
Original	Verwendet das natürliche Seitenverhältnis jedes Fotos. Es wird nicht beschnitten — Bilder mit unterschiedlichen Proportionen behalten ihre individuelle Form.

Im Karussell-Layout wirkt das Seitenverhältnis des Hauptbilds als Breite jedes Bildes bei fester Höhe — bei “Original” haben unterschiedliche Fotos verschiedene Breiten.

Höhe der Vorschauleiste (px)

Wird angezeigt, wenn das vertikale Layout (Vorschaubilder unter dem Hauptbild) gewählt ist. Standard: 110 px.

Bestimmt die Höhe der horizontalen Vorschauleiste. Die Breite jedes einzelnen Vorschaubilds ergibt sich automatisch aus Höhe × Seitenverhältnis, die Anzahl der gleichzeitig sichtbaren Vorschaubilder aus der Galerie-Breite geteilt durch die Vorschaubild-Breite.

Breite der Vorschauleiste (px)

Wird angezeigt, wenn das horizontale Layout (Vorschaubilder rechts neben dem Hauptbild) gewählt ist. Standard: 200 px.

Bestimmt die Breite der vertikalen Vorschauleiste. Die Höhe jedes einzelnen Vorschaubilds ergibt sich automatisch aus Breite ÷ Seitenverhältnis, die Anzahl der gleichzeitig sichtbaren Vorschaubilder aus der Galerie-Höhe geteilt durch die Vorschaubild-Höhe.

Vorschaubilder auch auf Mobilgeräten anzeigen

Standardmäßig werden die Vorschaubilder auf schmalen Bildschirmen (≤ 768 px) ausgeblendet — sie sind dort meist zu klein, um nützlich zu sein. Aktivieren Sie diese Option, um die Vorschaubilder auch auf Mobilgeräten zu zeigen.

Höhe des Karussells / Höheneinheit

Beide Optionen wirken nur im Karussell-Layout.

Höhe des Karussells legt den numerischen Höhenwert fest (Standard: 400).
Höheneinheit bestimmt, wie der Wert interpretiert wird:

Einheit	Beschreibung
`px`	Feste Pixel-Höhe (Standard).
`vw`	Prozent der Viewport-Breite. Skaliert mit der Browser-Breite.
`vh`	Prozent der Viewport-Höhe. Skaliert mit der Browser-Höhe.
`svh`	Kleine Viewport-Höhe (mobil): rechnet die Adressleiste mit ein.
`lvh`	Große Viewport-Höhe (mobil): ohne Adressleiste.
`dvh`	Dynamische Viewport-Höhe (mobil): wechselt zwischen `svh` und `lvh`, je nachdem, ob die Adressleiste sichtbar ist.

Abstand zwischen Bildern (px)

Bestimmt den Abstand zwischen Hauptbild und Vorschauleiste sowie zwischen den einzelnen Vorschaubildern. Standardwert: 6 px.

Rundung der Ecken

Die Optionen Rundung der Ecken (px) und Rundung anwenden auf wirken für Swiper- und Static-Galerien gleichermaßen.

Rundung der Ecken (px): 0 (scharfe Ecken, Standard) bis 30 px.
Rundung anwenden auf:
- Jedes Bild einzeln: Haupt- und Vorschaubilder erhalten jeweils abgerundete Ecken.
- Nur die äußeren Ecken der Galerie: ausschließlich die vier äußeren Ecken der gesamten Galerie sind abgerundet, einzelne Bilder behalten scharfe Ecken.

Dieselbe Galerie mit einer Rundung der Ecken von 0 px und von 16 px

Bildauflösung und srcset

Die Swiper-Galerie verwendet wp_get_attachment_image() und liefert damit automatisch ein vollständiges srcset mit allen registrierten Bildgrößen aus. Der Browser wählt anhand der Anzeigeposition und der Pixeldichte des Geräts (z. B. 2× auf Retina-Displays) die passende Variante. Daher gibt es im Customizer keinen “Pixelmaße”-Eintrag für die Swiper-Galerie — eine manuelle Größenwahl wäre für die vom Browser tatsächlich geladene Datei wirkungslos.

Für die Bildqualität ausschlaggebend ist die Original-Auflösung der hochgeladenen Fotos. Sind diese ausreichend hoch, liefert WordPress automatisch die passende Größe für jede Geräteklasse aus.

Bedienung mit der Tastatur

Besucher können durch die Galerie auch mit den Pfeiltasten blättern (sowie mit Bild auf / Bild ab), sobald die Galerie im sichtbaren Bereich der Seite ist. Ist die Lightbox geöffnet, steuern die Pfeiltasten nur die Lightbox — die Galerie dahinter bleibt stehen. Die Vorschaubilder und die Bilder-Slider in der Listenansicht reagieren nicht auf die Pfeiltasten, damit ein Tastendruck nicht mehrere Slider zugleich bewegt.

Die Tastaturbedienung ist immer aktiv. Abschalten lässt sie sich per Filter-Hook, siehe Galerie-Library: Anpassen.

Für Entwickler

Das Verhalten lässt sich über Filter-Hooks und CSS-Variablen weiter anpassen — siehe Galerie-Library: Anpassen.

Die Galerie kann auch außerhalb der Detailseite über den Galerie-Shortcode eingesetzt werden.