Einführung
Die meisten modernen Webseiten setzen, wenn Sie Bilder angezeigt haben wollen auf Lightboxen. Ich persönlich find die Lightbox2 zu langsam und verwende daher einen Konkurenten, die Slimbox, welche mit MooTools zusammen arbeitet.
Die aktuelle Version von MooTools wird leider von dem TYPO3 Plugin nicht unterstützt. Daher habe ich einen kleinen Fix geschrieben um auch ohne die Extension perfectlightbox an den Genuß eines updatebaren Produktes komme.
Vorgehensweise
Ich gebe zu, dass ich mich hier nicht auf Lorbeeren ausruhen darf. Einen Teil des Quellcodes übernehme ich aus der veralteten Extension.
- Runter laden von MooTools
Adresse: http://mootools.net/ - Runter laden von Slimbox
Adresse: http://www.digitalia.be/software/slimbox - Hochladen des ganzen in eine Ordnerstruktur:
Laden Sie die mootools.js und slimbox.js in einen Ornder ihrer Wahl.
Laden Sie die *.gif Dateien aus dem Ordner "css" der Slimbox in ihr Bilderverzeichniss.
- Erweitern ihres CSS Templates
Sie haben bei diesem Schritt zwei Möglichkeiten. Entweder Sie fügen den Inhalt der slimbox.css zu Ihrer CSS Datei hinzu, oder Sie implementieren eine zweite CSS Datei in ihr Template:
page.includeCSS.slimbox = fileadmin/IHR_PFAD/slimbox.css - Anpassen des CSS
In der CSS Datei, egal welche Sie genommen haben, befinden sich vier Verweise auf die Bilder closelabel.gif, loading.gif, nextlabel.gif und prevlabel.gif. Diese Verweise müssen Sie anpassen, je nachdem wo Sie die Bilder auf ihrem Server platziert haben. Geben Sie den relativen Pfad von der CSS-Datei ausgehend an. - Anpassen des Setups des Templates:
Fügen Sie folgende Werte in den Setupteil ihres Templates.
- page.includeJS.mooTools=fileadmin/IHR_PFAD/mootools.1.2.3.js
- page.includeJS.slimbox=fileadmin/IHR_PFAD/slimbox.js
- tt_content.image.20.1 {
- titleText.override.if.isTrue.field = image_zoom
- imageLinkWrap {
- typolink {
- parameter.listNum.stdWrap.if.isTrue.field = image_link
- parameter.override.cObject = IMG_RESOURCE
- parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
- parameter.override.cObject.file.maxW = 900
- parameter.override.cObject.file.maxH = 600
- parameter.override.if.isTrue.field = image_zoom
- parameter.override.if.isFalse.field = image_link
- ATagParams = rel="lightbox[lb{field:uid}]"
- ATagParams.insertData = 1
- }
- }
- }
Zusammenfassung
Der letzte Teil ist ein wenig aus der Ursprünglichen Extension kopiert, es ist aber die einzige Möglichkeit dies es diesbezüglich gibt.
Diese wenigen Schritte sorgen dafür, dass die Slimbox funktionsfähig und auf dem neusten Stand der Technik ist. Der erzeugte HTML Quelltext ist wesentlich sauberer als vorher.
