Lightbox

Eine Lightbox mit einer größeren Ansicht öffnet sich bei Klick auf Bilder, Videos oder einen Linktext. Bei Klick auf die Hintergrundfläche, das x-Feld oder die Escape-Taste schließt sich das Feld. Bilder innerhalb der Lightbox sollten im Format 16:9 sein und eine Maximalgröße von 1070×602px haben.

Über das Pattern

JavaScript

Anwendung

import { wmInitModal } from './modal.js';
wmInitModal()

Dependencies

utils.js, modal-image.js, modal-media.js, modal-page.js, modal-html.js, modal-gallery.js

Parameter und Anwendung in Nunjucks

# Parameter modal(settings)
settings:
  link: "string" # Pfad zu Inhalt
  group: "string" # Frei wählbarer String, der Modalelemente gruppiert
  html: "string" # Selector für Element, dessen Inhalt im Modal angezeigt werden soll
  type: "string" # Legt fest wie das Modal dargestellt wird (image, video, audio, page, html)
  hidden: "Boolean" # Link verbergen
  ajax: "Boolean" # Lade Daten aus Link mittels fetch()
  class: "string" # CSS Klassenname
  attributes: "object" # HTML-Attribute für den Link (z. B.: width, height, class,...), frei wählbar
  width: "string" # Optionale Maximalbreite für das Modal
  height: "string" # Optionale Maximalhöhe für das Modal

# Anwendung
## Die Javascript-Datei "modal.js" muss eingebunden sein
{% from "components/modal/modal.njk" import modal with context %}

{% call modal(settings) %}
  Link-Text
{% endcall %}