Das Ergebnis sieht im Backend dann So aus:
Konflikte mit Javascript, die eine Lightbox kann dies, die andere jenes, Mootols & Co. - ich habe die "Colorbox" entdeckt, mit jQuery, unterstützt iFrames, Ajax generated Content, inline HTML - perfekt!
Was noch fehlte war eine praktische Extension, welche es im Reiter "Medien" dem Bild bei "Klick-Vergrößern" erlaubt die entsprechend gewünschte Funktion für das Bild auszuwählen.
Nachstehend möchte ich kurz die auf die Schritte für die kleine Ext eingehen.
Zunächst holen wir uns die Colorbox:
http://colorpowered.com/colorbox/
VOR der ColorBox muss jQuery eingebunden werden. Nachdem eine Ext im Kickstarter angelegt wurde, machen wir ein kleines statisches Template Setup und binden es später NACH jQuery ein. Im Typoscript bindet man die erforderlichen .js ein - dies ist zum einen die colorbox.js selbst, zum anderen eine default Konfiguration für Mapping der class="colorbox", zusammen mit der CSS Datei sind alle erforderlichen Dateien eingebunden:
### include CSS style
page.headerData.1337 = COA
page.headerData.1337.1 = TEXT
page.headerData.1337.1.value =
type="text/css" media="screen,projection" page.headerData.1337.1.insertData = 1
page.headerData.1337.6 = TEXT
page.headerData.1337.6.value = <script type="text/javascript" src="{path:{PFAD Z.B. IN CONSTANTS}}"></script>
page.headerData.1337.6.insertData = 1
page.headerData.1337.8 = TEXT
page.headerData.1337.8.value = <script type="text/javascript" src="{path:{PFAD Z.B. IN CONSTANTS}}"></script>
page.headerData.1337.8.insertData = 1
Die erwähnte Defaultkonfiguration wird mit der Colorbox mitgeliefert. Sind alle erforderlichen Dateien eingebunden, muss im Typoscript das Mapping für das image Feld angepasst werden:
tt_content.image.20.1 {
titleText.override.field = {$plugin.colorboxjquery.captionField}
titleText.override.htmlSpecialChars = 1
titleText.override.if.isTrue.field = tx_colorboxjquery_activate
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.if.isTrue.field = image_zoom
parameter.override.if.isTrue.field = tx_colorboxjquery_activate
parameter.override.if.isFalse.field = image_link
userFunc = tx_colorboxjquery->main
}
}
}
Wie aus dem Typoscript ersichtlich, brauchen wir als userFunc unsere main in der .php unserer neue angelegten Extension. Die PHP Datei wird im Typoscript ebenfalls eingebunden:
includeLibs.colorboxjquery = EXT:colorboxjquery/class.tx_colorboxjquery.php
In der main der hier class.tx_colorboxjquery.php benannten Datei, switchen wir lediglich die uns übergebene tx_colorboxjquery_activate um den passenden class- parameter in den Link für den Colorbox- Effekt einzufügen:
function main($content,$conf) {
$uid = (1 == intval($conf['ignoreUid'])?'':$this->cObj->data['uid']);
switch ($this->cObj->data['tx_colorboxjquery_activate']) {
case 1:
$lightboxParams = 'class="colorbox"';
break;
case 2:
$lightboxParams = 'class="colorbox" rel="[lb'.$uid.']"';
break;
case 3:
$lightboxParams = 'class="colorboxSlideshow" rel=[lb'.$uid.']';
break;
case 4:
$lightboxParams = 'class="colorboxVideo"';
break;
case 5:
$lightboxParams = 'class="colorboxInline"';
break;
case 6:
$lightboxParams = 'class="colorboxiframe"';
break;
}
return '<a href="'.$content["url"].'"'.$content["targetParams"].' '.$content["aTagParams"].' '.$lightboxParams.'>'.$linkImg;
}
Jetzt müssen nur noch 2 Dateien der neuen Ext. angepasst werden, die ext_tables.php und ext_tables.sql. Wir benötigen in der tt_content für tx_colorboxjquery_activate lediglich ein neues Feld das wir in der ext_tables.sql anlegen:
CREATE TABLE tt_content (
tx_colorboxjquery_activate tinyint(3) DEFAULT '0' NOT NULL,
);
Jetzt muss das Feld noch in der ext_tables.php zugeordnet werden:
$tempColumns = Array (
"tx_colorboxjquery_activate" => Array (
"exclude" => 1,
"label" => "LLL:EXT:colorboxjquery/locallang_db.xml:tt_content.tx_colorboxjquery_activate<br/>",
"config" => Array (
'type' => 'select',
'items' => array(
array('SINGLE',1),
array('IMAGESET',2),
array('SLIDESHOW',3),
array('VIDEO',4),
array('INLINE',5),
array('IFRAME',6),
),
)
),
);
Im
Kontaktformular oder im Menüpunkt
Partner kann auf dieser Seite die Colorbox in Aktion sehen.


