Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Setting images to open in a lightbox

Eine Lightbox ist ein Designeffekt, der ein Bild in einem zentrierten Overlay öffnet und den Rest der Seite abdunkelt, wenn auf ein Bild geklickt wird. Wenn du auf das x in der oberen Ecke klickst, wird sie geschlossen und die Seite taucht wieder auf. Lightboxes sind eine großartige Möglichkeit, Bilder für Besucher hervorzuheben und zu vergrößern, die sie sich genauer ansehen möchten.

Bevor Sie anfangen

  • Einige Funktionen sind nicht mit Lightboxes kompatibel oder funktionieren anders, wenn Lightboxes aktiviert sind. Beispielsweise deaktivieren Lightboxes in den meisten Fällen Klick-URLs.
  • Zoom durch Zusammenziehen wird für Lightbox-Bilder auf mobilen Geräten nicht unterstützt.
  • Wenn deine Website auf Squarespace Version 7.0 läuft, variieren die Optionen für die Galerie-Seite je nach Template.

Ändern der Hintergrundfarbe der Lightbox

Für Galerieabschnitte in Version 7.1 kannst du deine Lightbox im Editor „Abschnitts-Designs“ in einer beliebigen Farbe formatieren.

In den meisten anderen Fällen kannst du in den Blockeinstellungen oder Website-Stilen ein Dunkles oder Helles Overlay für die Lightbox auswählen. Weitere Einzelheiten findest du in den Abschnitten zu Bild-Blöcken, Galerie-Blöcken und Galerie-Seiten.

Galerie-Abschnitte (Version 7.1)

Galerieabschnitte in Rasterlayouts in Version 7.1 verfügen über eine Lightbox-Option in den Abschnittstilen. So aktivierst du die Lightbox:

  1. Klicke auf der Seite auf Bearbeiten, bewege den Mauszeiger über den Galerieabschnitt und klicke auf das Stift-Symbol.
  2. Stelle sicher, dass der Galerie-Typ auf Raster: Einfach , Raster: Streifen oder Raster: Mauerwerk eingestellt ist. Slideshow-Layouts unterstützen keine Lightbox-Funktionen.
  3. Schalte den Schalter Lightbox ein.
  4. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

So gestaltest du die Lightbox-Farbe:

  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Farben.
  2. Klicke auf Abschnittsdesigns.
  3. Bewege den Mauszeiger auf das Design, das deinem Galeriebereich entspricht, und klicke auf das Stift-Symbol.
  4. Verwende im Abschnitt Galerien die Option Lightbox-Hintergrund, um eine Lightbox-Farbe auszuwählen.
  5. Um die Farbe der Steuerelemente für die Lightbox-Navigation zu ändern, verwenden das Lightbox-Symbol.
  6. Klicken Sie auf Speichern.

Beachte, dass Beschriftungstext nicht in der Lightbox des Galerieabschnitts angezeigt wird.

Bild-Blöcke

Bild-Blöcke, die das Inline-Layout verwenden, unterstützen eine Lightbox. So aktivierst du sie:

  1. Add an Image Block, or double-click an existing Image Block to open the image editor.
  2. Klicken Sie auf den Reiter Design.
  3. Stelle sicher, dass dein Layout auf Inline eingestellt ist. Andere Layouts unterstützen keine Lightbox.
  4. Setze ein Häkchen neben Lightbox aktivieren.
  5. Wähle zwischen Dunkles Overlay und Helles Overlay für deinen Lightbox-Stil mit der Dropdown-Liste Lightbox-Design.
  6. Klicken Sie auf Apply (Anwenden), um Ihre Änderungen zu speichern.

Beschriftungen werden immer angezeigt, wenn du den Mauszeiger über Lightbox-Bilder bewegst, unabhängig davon, welche Option für die Anzeige von Beschriftungen du wählst. Auf Mobilgeräten werden sie angezeigt, wenn du auf das Punktsymbol tippst.

Raster-Galerie-Blöcke

Nachdem du deine Bilder zu einem Raster-Galerie-Blockhinzugefügt hast, klicke auf den Tab Design und aktiviere Lightbox. Lege deinen Lightbox-Slideshow-Stil fest, indem du in der Dropdown-Liste die Option Dunkles Overlay oder Helles Overlay wählst.

Untertitel werden immer angezeigt, wenn du den Mauszeiger über Lightbox-Bilder bewegst. Auf Mobilgeräten werden sie angezeigt, wenn du auf das Punktsymbol tippst. Slideshow-, Karussell- und gestapelte Galerie-Blöcke unterstützen keine Lightbox.

Übersichts-Blöcke

Wenn ein Wand- oder Raster-Übersichts-Block mit einer Galerie-Seite verbunden ist, werden die Bilder automatisch in einer Lightbox-Slideshow geöffnet. Die Lightbox-Farbe des Übersichts-Blocks ist immer Dunkel. Beschriftungen werden beim Mouseover angezeigt.

The lightbox slideshow affects clickthrough URLs:

  • While viewing the page, images with clickthrough URLs open the clickthrough link when clicked, rather than opening the lightbox slideshow.
  • Wenn die Lightbox-Slideshow geöffnet ist, sind Klick-URLs deaktiviert.
Tipp: Wenn du Version 7.0 verwendest und einen Übersichts-Block mit einer Galerie-Seite verknüpfst, aktivierst du die Option Vorschaubild in den Videos der Galerie-Seite verwenden. Andernfalls werden sie im Übersichts-Block wiedergegeben, ohne eine Lightbox zu öffnen.

Galerie-Seiten (Version 7.0)

Die Galerie-Seiten einiger Templates in Version 7.0 unterstützen eine Lightbox-Funktion. Für standardmäßige Galerie-Seiten kannst du die Lightbox-Farbe in Website-Stile auf Hell oder Dunkel festlegen. Videobeschreibungen werden nicht in der Lightbox angezeigt.

Informationen zur Funktionsweise von Lightbox-Optionen in diesen Template-Familien findest du in der folgenden Tabelle.

Template-Gruppe Lightbox options
Adirondack
  • Gallery Page set to Grid
  • Image captions display on hover
Avenue
  • No lightbox

Aviator

  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Image captions display on hover

Bedford

  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Image captions display on hover

Brine

  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Image captions display on hover
  • Wird nur für Videos auf Galerie-Index-Seiten unterstützt. Tipp: Wenn du auf einen Link in der Bildunterschrift klickst, wird die Lightbox geöffnet, nicht der Link.

Farro

  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Image captions display on hover
Five
  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Image captions display on hover
Flatiron
  • No lightbox
Forte
  • Click + icon in top-right corner of image to open lightbox
  • Disabled for Index Page
  • Captions don't display
Galapagos
  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Image captions display on hover
Ishimoto
  • No lightbox
Momentum
  • No lightbox

Montauk

  • No lightbox
Native
  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Image captions display on hover

Pacific

  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Image captions display on hover
  • Supported on grid gallery Index Page sections

Skye

  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Disabled for Index Page
  • Image captions display on hover
Supply
  • No lightbox

Tremont

  • No lightbox
Wells
  • No lightbox
Wexley
  • Klicke auf ein beliebiges Bild, um eine Lightbox-Slideshow zu öffnen.
  • Lightbox is disabled on mobile
  • Captions don't display

York

  • Gallery Page set to Grid
  • Clickthrough URLs disable lightbox
  • Image captions display on hover
War dieser Beitrag hilfreich?
31 von 130 fanden dies hilfreich
Setting images to open in a lightbox