Freitag, 7. März 2014

Content als Lightbox - Modalbox mit TYPO3

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: 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).

Wenn Sie dann einen neuen Hyperlink im RTE setzen, können Sie anschließend im RTE-DropDown "Text style" Ihre neue Klasse dem Link hinzufügen.
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').clickfunction (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{type911}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.

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.

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.

8 Kommentare:

  1. 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öschen
    Antworten
    1. Hallo Eva,

      im 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

      Löschen
    2. Vielen Dank, ich bin gespannt auf Deinen Blog, Viele Grüße
      Eva

      Löschen
    3. Hi Eva,

      so 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

      Löschen
  2. Can you suggest how to add closing function or close button of loghtbox page?

    AntwortenLöschen
  3. Hallo Andreas Hoffmeyer,

    vielen 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

    AntwortenLöschen
  4. Hier das JS mit Closing Button:

    $('span.close').click( function (e) {
    // hide the modal box
    $('#modal').delay(100).fadeOut();
    });

    AntwortenLöschen
  5. Vielen Dank erstmal für das Tutorial und das Update auf deinem Blog.
    Kannst du mir sagen wie der Typoscript Part aussehen muss wenn man nicht css styled sondern fluid verwendet?

    AntwortenLöschen