BLOG

Kalender

Oktober 2009
M D M D F S S
« Jul   Okt »
 1234
567891011
12131415161718
19202122232425
262728293031  

Tags

Letze Kommentare

Twitter

  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:

undefinedhttp://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 undefinedKontaktformular oder im Menüpunkt undefinedPartner kann auf dieser Seite die Colorbox in Aktion sehen. 

 

Kommentare

Keine Einträge

Schreiben Sie den ersten Kommentar!
 

Hinterlasse eine Nachricht

Meine Informationen merken

Jetzt bookmarken:addthis.comask.combackflipblinkbitsblinklistblogmarksbluedot.usco.mmentsconnoteadel.icio.usde.lirio.usdigg.comFark.comFeed me links!FolkdFurlgoogle.comhype it!LinkaGoGoLinkaARENAlive.comMa.gnoliaMister WongMyLink.denetscapenetvouznewsvine.comoneviewRawSugarRedditscuttleshadowsSimpySmarkingSpurlstumbleupon.comTailRankTagThatTechnoratiWebnewsWinkWistsYahooMyWebYiggIt