Colorbox-Spickzettel für Upmarkit

Das Colorbox-Modul ist auf der ganzen Website bereits geladen — Sie müssen nichts installieren oder programmieren. Einfach den passenden Code unten im CKEditor-Quelltext-Modus (Symbol <> in der Toolbar) einfügen.

1. Einzelnes Bild als Overlay öffnen

Das Standardbeispiel — klickbares Bild, öffnet vergrößert:

<a class="colorbox" href="/pfad/zum/grossen-bild.jpg" title="Bildunterschrift hier">
  <img src="/pfad/zum/grossen-bild.jpg" alt="Beschreibung für Screenreader">
</a>

href = das Bild, das im Overlay angezeigt wird (kann größer/hochauflösender sein als das sichtbare Vorschaubild)
title = optionale Bildunterschrift, erscheint unten im Overlay
Kein drush cr / Cache leeren nötig — reine Inhaltsänderung wirkt sofort

2. Bildergalerie (mehrere Bilder, mit Vor/Zurück-Pfeilen im Overlay)

Alle Bilder, die zur selben Galerie gehören sollen, bekommen denselben data-colorbox-gallery-Wert:

<a class="colorbox" href="/bilder/foto1-gross.jpg" data-colorbox-gallery="meine-galerie" title="Foto 1">
  <img src="/bilder/foto1-klein.jpg" alt="Foto 1">
</a>

<a class="colorbox" href="/bilder/foto2-gross.jpg" data-colorbox-gallery="meine-galerie" title="Foto 2">
  <img src="/bilder/foto2-klein.jpg" alt="Foto 2">
</a>

<a class="colorbox" href="/bilder/foto3-gross.jpg" data-colorbox-gallery="meine-galerie" title="Foto 3">
  <img src="/bilder/foto3-klein.jpg" alt="Foto 3">
</a>

Der Galerie-Name (meine-galerie) ist frei wählbar — wichtig ist nur, dass er bei allen zusammengehörigen Bildern identisch ist. Für eine andere Bildgruppe auf derselben Seite einfach einen anderen Namen verwenden (z. B. "team-fotos", "produktbilder").

3. Externe Seite / PDF / iframe im Overlay öffnen

Dafür gibt es die extra Theme-Funktion (Klasse openmodal, nicht colorbox):

<a class="openmodal" href="https://example.com/dokument.pdf">PDF ansehen</a>

Öffnet die Ziel-URL in einem großen iframe-Overlay (90% Breite/Höhe). Funktioniert z. B. auch für eingebettete Formulare oder andere Seiten.

4. Video (YouTube/Vimeo) im Overlay

<a class="colorbox" href="https://www.youtube.com/watch?v=VIDEO_ID" title="Video-Titel">
  <img src="/pfad/zum/video-vorschaubild.jpg" alt="Video-Vorschau">
</a>

Colorbox erkennt YouTube/Vimeo-Links automatisch und bettet den Player statt eines Bildes ein.

Was der Nutzer sonst noch ändern kann

Was	Wie
Bildunterschrift	`title="..."` am `<a>`-Tag
Mehrere Bilder gruppieren	`data-colorbox-gallery="beliebiger-name"` — gleicher Name = gleiche Galerie
Link-Text statt Bild	Einfach Text statt `<img>` in den `<a>`-Tag schreiben: `<a class="colorbox" href="bild.jpg">Bild ansehen</a>`
Andere Overlay-Größe (nur bei `openmodal`/iframe)	Im JS `width: '90%', height: '90%'` anpassbar (Datei: `js/colorbox-iframe.js`) — für normale Bilder regelt Colorbox die Größe automatisch passend zum Bild

Globale Grundeinstellungen (bereits konfiguriert, gelten für alle Overlays automatisch)

Übergangs-Effekt: „elastic" (sanftes Auf-/Zuklappen)
Maximale Overlay-Größe: 98% der Bildschirmfläche
Texte (Schließen, Weiter, Zurück) sind bereits auf Deutsch eingestellt
Schließen per Klick daneben oder auf das X

Diese Grundeinstellungen ändern sich nicht durch den obigen HTML-Code — sie gelten automatisch für jedes Element mit class="colorbox". Wenn Sie diese Grundeinstellungen (z. B. Übergangseffekt, Farbe) global anpassen möchten, sagen Sie mir Bescheid — das ist eine andere (Konfigurations-)Stelle, kein HTML.

Colorbox Overlay