TYPO3: Eine Lightbox ohne Extension einbinden

TYPO3

Ihr kennt bestimmt die Möglichkeit Fotos und Grafiken in einer "Lightbox" zu öffnen. Es gibt sowohl Plugins für WordPress, sowie auch Erweiterungen für TYPO3, mit denen ihr dieses Umsetzen könnt. Da es bei dieser Methode aber häufiger Probleme mit z.B. verschiedenen JavaScript-Bibliotheken gibt, möchte ich euch für TYPO3 heute eine flexible Lösung vorstellen, die zudem noch ohne Extension auskommt.

Die Lightbox

Im Laufe der Zeit hat sich der Begriff Lightbox etabliert. Inzwischen gibt es verschiedenste Plugins für die unterschiedlichsten JavaScript-Frameworks und dazu mit den kuriosesten Namen. Ich nutze sehr gerne die Fancybox, ein Plugin das auf der jQuery-Bibliothek basiert. Mit der in diesem Artikel vorgestellten Lösung seid ihr allerdings frei in der Wahl der Bibliothek und des Plugins.

Der Lösungsansatz

Der Lösungsansatz ist denkbar einfach, wir manipulieren einfach mit Hilfe von TypoScript den generierten TypoLink, der normalerweise dafür sorgt das sich das Bild in einem Popup öffnen würde.

Die Umsetzung

Ich teile das TypoScript zur Erklärung mal in kleinere Teile auf und gehe auf diese Teile ein.

Der imageLinkWrap und der TypoLink

Den TypoLink des imageLinkWraps ist der Bereich, den wir abändern möchten. Dazu muss der alte TypoLink erstmal weg (Zeile 2).

1
2
3
4
5
6
tt_content.image.20.1.imageLinkWrap {
    typolink >
    typolink {
        [...]
    }
}

Die bestehenden Attribute

Die alten Attribute wieder einbinden. Die bestehenden Attribute, wie z.B. die Höhe und Breite des Bildes, müssen natürlich wieder eingebunden werden.

1
2
3
4
5
6
7
8
9
parameter.cObject = IMG_RESOURCE
parameter.cObject.file {
    import.current = 1
    width = {$styles.content.imgtext.linkWrap.width}
    height = {$styles.content.imgtext.linkWrap.height}
    effects = {$styles.content.imgtext.linkWrap.effects}
}    
target = {$styles.content.links.target}
extTarget = {$styles.content.links.extTarget}

Unsere Änderungen

Um nun den neuen Link zu erzeugen benötigen wir nun die URL zum Bild (Zeile 1-4) und eine CSS-Klasse (Zeile 5-7).

1
2
3
4
5
6
7
parameter.override {
      field = image_link
      listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
}
ATagParams = class='fancybox'
ATagParams.insertData = 1
ATagParams.if.isFalse < .parameter.override

Wie ihr an Zeile 5 sehen könnt, könnt ihr beliebige Frameworks und Plugins nutzen und müsst dementsprechend nur die Klasse anpassen.

Das Framework, das Plugin und ein wenig CSS

Damit das Ganze auch funktioniert, fehlen natürlich noch ein bisschen CSS und natürlich die JavaScript-Dateien.

1
2
3
4
5
6
7
8
9
10
page {
    includeCSS {
        file1 = fileadmin/css/fancybox.css
    }
    includeJSFooter {
        file1 = http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
        file2 = fileadmin/lib/fancybox.js
        file3 = fileadmin/lib/custom.js
    }
}

Wie ihr seht binde ich auf Grund der Performance die JavaScrips im Footer ein. Solltet ihr damit Probleme bekommen, könnt ihr die Dateien natürlich auch mit Hilfe von includeJS im Header einbinden. Ihr solltet trotzdem darauf achten, dass evtl. andere Extensions bereits Frameworks einbinden. Sollte jQuery bereits eingebunden werden, könnt ihr die Einbindung natürlich bei euch löschen. Im Falle von Konflikten mit anderen Frameworks gibt es bei jQuery den noConflict-Modus.

Die custom.js

In Zeile 8 des vorherigen Codeblocks binde ich die Datei custom.js ein. Diese beinhaltet bei mir unter anderem die Konfiguration der Fancybox. Im einfachsten Falle sieht diese wie folgt aus:

1
2
3
$(document).ready(function() {
    $("a.fancybox").fancybox();
});

Die Zusammenfassung

Zum Abschluss nochmal das gesamte TypoScript im Überblick.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
tt_content.image.20.1.imageLinkWrap {
    typolink >
    typolink {
        parameter.cObject = IMG_RESOURCE
        parameter.cObject.file {
            import.current = 1
            width = {$styles.content.imgtext.linkWrap.width}
            height = {$styles.content.imgtext.linkWrap.height}
            effects = {$styles.content.imgtext.linkWrap.effects}
        }
        parameter.override {
            field = image_link
            listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
        }
        ATagParams = class='fancybox'
        ATagParams.insertData = 1
        ATagParams.if.isFalse < .parameter.override    
        target = {$styles.content.links.target}
        extTarget = {$styles.content.links.extTarget}
    }
}
page {
    includeCSS {
        file1 = fileadmin/css/fancybox.css
    }
    includeJSFooter {
        file1 = http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
        file2 = fileadmin/lib/fancybox.js
        file3 = fileadmin/lib/custom.js
    }
}

Was haltet ihr von dieser Möglichkeit der Einbidung? Habt ihr anderen Lösungsansätze oder Fragen zu dieser Lösung?

FacebookRSS Feeds

Die Kommentarfunktion zu diesem Beitrag wurde deaktiviert.