Eine Modalbox ist eine tolle Möglichkeit den Website-Besuchern seine Inhalte effektvoll zu präsentieren. Dabei kann man nicht nur Bilder und Videos in einer Lightbox öffnen. Nahezu jede Art von Content ist möglich und ermöglicht dem Leser zusätzliche Inhalte zu laden, ohne die aktuelle Seite verlassen zu müssen.
Modalbox
Eine Modalbox, auch Lightbox genannt, ist eine Art PopUp. Im Unterschied zum PopUp öffnet sich kein neues Fenster sondern die Inhalte werden asynchron (AJAX) von einer anderen Quelle geladen und in der Lightbox geöffnet. Das öffnen dieser Lightbox können Sie mehr oder weniger effektvoll gestalten, ganz nach Vorgabe oder Kreatitvität. So wird in der Regel der Website-Inhalt mit einem transparenten Overlay (zumeist weiß oder schwarz) optisch in den Hintergrund versetzt, sodass nur noch die Lightbox gut sichtbar im Zentrum des Bildschirms steht.
Modalbox mit TYPO3
Im Folgenden möchte ich eine Modalbox (im weiteren Verlauf als Lightbox bezeichnet) erstellen, die ohne die Verwendung zusätzlicher TYPO3-Extensions auskommt. Auch auf die Verwendung von jQuery-Plugins werde ich verzichten. Dadurch benötigen Sie nur noch jQuery als Basis-Bibliothek.
Schritt 1: Neue Linkklasse "open-in-lightbox"
Nicht jeder Link soll sein Ziel in einer Lightbox öffnen. Es ist daher sinnvoll, eine Klasse zu definieren, für die die Lightbox-Funktionalität gelten soll - hier "open-in-lightbox".
Tragen Sie folgenden Code in Ihr Haupt-PageTS ein (auf Ihrer Root-Seite in den Seiteneigenschaften unter Resources):
// ------------------------------
RTE.default {
contentCSS = fileadmin/ihr.pfad/zum/CSS/styles.css
proc.allowedClasses := addToList(open-in-lightbox)
}
contentCSS = fileadmin/ihr.pfad/zum/CSS/styles.css
proc.allowedClasses := addToList(open-in-lightbox)
}
contentCSS: Hier müssen Sie ein Stylesheet angeben. Dies muss nicht Ihr Haupt-Stylesheet sein. Wenn Sie die Klasse nur für bestimmte JavaScript-Funktionen brauchen, können Sie auch ein anderes CSS dort definieren, welches nur diesen einen Zweck hat, nämlich Klassen bereitszustellen, die auch im RTE von TYPO3 hinterlegt werden können.
proc.allowedClasses: Damit beschränken Sie die spätere Auswahlmöglichkeit im RTE
addToList: TYPO3 hat bereits diverse Klassen, deren Verwendung im RTE erlaubt sind. Um hier weitere hinzuzufügen schreiben Sie alle weiteren Klassen durch Komma getrennt zwischen die Klammern.
Das CSS erweitern Sie dann um die Klasse "a.open-in-lightbox" (beschränkt auf Hyperlinks).
Mit dieser Methode können sie dem Link oder jedem anderen Element welches Sie in Ihrer CSS-Datei definieren, weitere Klassen zuordnen.
Schritt 2: JavaScript
Erstellen Sie zunächst Ihre Haupt-JavaScript-Datei (oder eine JS-Datei nur für die Lightboxfunktion) und binden Sie diese wie gewohnt ein.
Ich gehe hier von einer noch leeren Datei aus:
// ------------------------------
// ------------------------------
// Initialisiere die Funktion sobald das Dokument geladen wurde
$( function () {
// Aufruf des onClick-Events
$('a.open-in-lightbox').click( function (e) {
// Link-Ziel wird in Variable gespeichert
var linkTarget = $(this).attr('href');
// Aufbau des Containers, der den Inhalt enthalten soll
// diesem gebe ich die ID "modal".
$('<div>', {
id: 'modal'
})
// Über die Funktion load starte ich einen AJAX-Request
// {type:911} an dieser Stelle können Sie zusätzliche Parameter übergeben (GET oder POST.
// In unserem Fall POST
// Ist der Request abgeschlossen, soll eine Funktion ausgeführt werden
.load(linkTarget, {type: 911}, function () {
// Mit einer Zeitverzögerung von 300ms lasse ich die Lightbox langsam erscheinen
$(this).delay(300).fadeIn();
})
.appendTo('body') // Das HTML meiner Box soll vor dem schließenden Body-Tag erscheinen
.hide(); // Ich verstecke die Box erstmal. Sonst würde eine leere Box erscheinen sobald man auf den Link klickt
e.preventDefault(); // Ähnlich wie return false; also: verhindere das normale Verhalten des Links
});
});
(die Funktionsweise wird in den Code-Kommentaren beschrieben)
Gestaltung und Platzierung der Lightbox können Sie im CSS vornehmen.
Gestaltung und Platzierung der Lightbox können Sie im CSS vornehmen.
Schritt 3: TypoScript
Nun muss noch der eigentliche Inhalt korrekt geladen werden.
//-------------------------------
modal = PAGE
modal {
config {
no_cache = 1
disableAllHeaderCode = 1
disablePrefixComment = 1
}
typeNum = 911
10 < styles.content.get
}
//-------------------------------
Dieses recht kurze TypoScript holt nun den Inhalt der Seite, die im Link hinterlegt war und gibt diesen an die Lightbox weiter. Hierbei erzeuge ich ein PAGE-Objekt und verhindere das Caching (no_cache) des Inhalts (sonst wird u.U. der gleiche Inhalt ausgegeben, obwohl Sie auf einen anderen Link mit anderem Verweis geklickt haben).
Zusätzlich entferne ich alle nicht benötigten Elemente (disableAllHeaderCode): <html>,</head> und <body>. Somit wird ausschließlich der Inhalt der Zielseite ausgegeben. Dieser wird jedoch wie gewohnt gerendert, sodass Sie diesen problemlos wieder mit CSS gestalten können. Die TYPO3-Kommentare entferne ich ebenfalls. Das wäre nur unnötiger Ballast, den man generell abschalten sollte.
Wir hatten in unserem JavaScript einen Parameter übergeben, den ich "type" genannt habe. "type" ist ein von TYPO3 geschützter Begriff und bezeichnet die sog. typeNum, die Sie in TypoScript definieren können. Mittels typeNum können Sie unterschiedliche Dokumenttypen erstellen (z.B. einen RSS-Newsfeed u.s.w.).
Unser type:911 taucht also als typeNum=911 wieder auf. Somit weiß TYPO3, dass der Seitenaufbau nach den Regeln innerhalb von "modal" erfolgen soll.
Zu guter Letzt ziehe ich mir die Inhalte über styles.content.get. Natürlich können Sie hier auch mit Templates (klassisch oder Fluid) arbeiten, das bleibt Ihnen und der Komplexität Ihrer Lightbox überlassen.
Ich habe mich in diesem Beitrag eher auf das Grundgerüst von Modalboxen (also Lighbtox mit Content) konzentriert. Background-Overlays, ein Schließen-Button etc. überlasse ich Ihrer Kreativität. Auch hier können Sie Bootstrap einsetzen, das gleich ein schicke Modalbox mitbringt. Damit sparen Sie sich zusätzlich einiges an Programmieraufwand.
Ich habe mich in diesem Beitrag eher auf das Grundgerüst von Modalboxen (also Lighbtox mit Content) konzentriert. Background-Overlays, ein Schließen-Button etc. überlasse ich Ihrer Kreativität. Auch hier können Sie Bootstrap einsetzen, das gleich ein schicke Modalbox mitbringt. Damit sparen Sie sich zusätzlich einiges an Programmieraufwand.
Fazit
Eine Modalbox ohne Extension ist mit nur wenig Aufwand zu realisieren. Durch jQuery können noch diverse Effekte das Verhalten der Box dynamischer erscheinen lassen. Sie haben dadurch mehr Kontrolle über das Websiteverhalten und können genauer mit Effekten etc. arbeiten.
Viel Spaß beim Ausprobieren.
Wenn Sie Fragen, Kritik oder Anregungen haben, nutzen Sie einfach die Kommentarfunktion oder schreiben Sie mir eine Nachricht.
Hallo Andreas, danke für den Artikel. Bei mir werden alle Content Elemente der Seite im modal Fenster geöffnet, wie kann ich erreichen, dass nur ein Inhaltselement geöffnet wird?
AntwortenLöschenHallo Eva,
Löschenim Moment ist es ja so, dass die komplette Seite gezogen wird, wie Du schon sagtest. Man kann jedoch auch direkt auf ein Inhaltselement über TYPO3 und den RTE verlinken. Dann entsteht ein Anker. Dann müsste man JavaScript und TypoScript entsprechend anpassen, damit auch das jeweilige Element gezogen wird.
Derzeit plane ich einen Umzug dieses Blogs mit (versprochen) regelmäßigen Updates und werde alle Beispiele (auch Dein Problem) als Gist zur Verfügung stellen.
Ggf. müsstest Du für dieses kleine Beispiel noch 2 Wochen warten, bis mein Blog fertig ist.
Viele Grüße,
Andreas
Vielen Dank, ich bin gespannt auf Deinen Blog, Viele Grüße
LöschenEva
Hi Eva,
Löschenso die neue Seite ist online und Deine Anfrage habe ich auch gleich mal beantwortet :)
http://www.andreas-hoffmeyer.de/blog/content-als-lightbox.html
Bei Fragen einfach Kommentar. Und wenn er Dir gefallen hat, gerne über Face etc. teilen, teilen, teilen :)
Viele Grüße,
Andreas
Can you suggest how to add closing function or close button of loghtbox page?
AntwortenLöschenHallo Andreas Hoffmeyer,
AntwortenLöschenvielen Dank für die sehr hilfreiche Anleitung, die perfekt funktioniert. Da ich mit Javascript fast kaum vertraut bin, wäre für mich noch ein Tipp für einen Closing Button sehr hilfreich, den sich auch mein 'Vorschreiber' erhofft.
Besten Dank vorab
Thomas
Hier das JS mit Closing Button:
AntwortenLöschen$('span.close').click( function (e) {
// hide the modal box
$('#modal').delay(100).fadeOut();
});
Vielen Dank erstmal für das Tutorial und das Update auf deinem Blog.
AntwortenLöschenKannst du mir sagen wie der Typoscript Part aussehen muss wenn man nicht css styled sondern fluid verwendet?