Too Cool for Internet Explorer

Update: Ich habe eine Extension geschrieben, welche Highslide JS in Typo3 einbindet: Öffnet externen Link in neuem FensterHighslide Gallery. Der hier beschriebene Weg muss also nicht mehr vollzogen werden. Die Extension kann man aus dem Öffnet externen Link in neuem FensterTypo3 Repository laden.

 

Highslide JS ist ein Web 2.0 Ansatz für Popup-Fenster, welcher sich bis ins Detail konfigurieren lässt.

Rost

In Typo3 kann man das klassische javascript Popup-Fenster mit wenigen Schritten durch Highslide JS ersetzen:

  1. Highslide JS besorgen
    Lade die benötigten Dateien von Öffnet externen Link in neuem Fensterhttp://vikjavev.no/highslide und entpacke die heruntergeladene Zip-Datei.
  2. Upload von Highslide JS
    Innerhalb des Ordners der entpackten Zip-Datei befinden sich einige html Dateien und Ordner. Einer dieser Ordner heisst "highslide". Dieser muss auf den Server hochgeladen werden. Dafür bietet sich der Ordner "fileadmin" an.
    Um ein wenig Ordnung zu halten, erstelle einen neuen Ordner "script" innerhalb von "fileadmin". Lade in den Ordner "script" den Ordner "highslide". Anschließend hast Du folgende Ordnerstruktur: fileadmin/script/highslide.
    Nun musst Du noch eine CSS-Datei in das Verzeichnis hochladen, welche das Aussehen von dem vergrößerten Bild festlegt. Du kannst eine eigene anhand der Beispiele erstellen oder folgende benutzen: Leitet Herunterladen der Datei einhighslide.css
  3. Einbinden von Highslide JS in Typo3
    Jetzt mußt Du Highslide in die Seite einbinden. Das machst Du, indem Du folgenden Code im Setup des Templates innerhalb des PAGE-Elements einfügst:

    includeCSS.file3 = fileadmin/script/highslide/highslide.css
    headerData.33 = TEXT
    headerData.33.value (
        <script type="text/javascript" src="fileadmin/script/highslide/highslide.js"></script>
        <script type="text/javascript">
            hs.registerOverlay({
                thumbnailId: null,
                overlayId: 'controlbar',
                position: 'top right',
                hideOnMouseOut: true
            });
            hs.graphicsDir = 'fileadmin/script/highslide/graphics/';
            hs.outlineType = 'rounded-white';
            hs.captionEval = 'this.thumb.title';
            hs.align = 'center';
        </script>
    )

  4. Links anpassen
    Nun musst Du die Links von Typo3 anpassen. Dazu Öffnest Du "class.tslib_content.php" im Verzeichnis /typo3/sysext/cms/tslib/ mit einem beliebigen Editor und suchst nach der Funktion (Sicherungskopie erstellen!!):

    function imageLinkWrap($string,$imageFile,$conf){ ... }

    Ersetze die Funktion mit folgendem Code:

    function imageLinkWrap($string,$imageFile,$conf) {
        $a1='';
        $a2='';
        $content=$string;
        if ($this->stdWrap($conf['enable'],$conf['enable.']))    {
            $content=$this->typolink($string, $conf['typolink.']);
            if ($content==$string && @is_file($imageFile)) {
                if ($conf['JSwindow'])    {
                    $gifCreator = t3lib_div::makeInstance('tslib_gifbuilder');
                    $gifCreator->init();
                    $gifCreator->mayScaleUp = 0;
                    $dims = $gifCreator->getImageScale($gifCreator->getImageDimensions($imageFile),$conf['width'],$conf['height'],'');
                    $offset = t3lib_div::intExplode(',',$conf['JSwindow.']['expand'].',');

                    $a1='<a href="'.$imageFile.'" onclick="return hs.expand(this);" class="highslide">';
                    $a2='</a>';
                } else {
                    $a1='<a href="'.htmlspecialchars($url).'"'.$target.$GLOBALS['TSFE']->ATagParams.'>';
                    $a2='</a>';
                }
                $content=$a1.$string.$a2;
            }
        }
        return $content;
    }

  5. (Optional) Control-Overlay hinzufügen
    Wenn Du innerhalb des Bildes noch ein Overlay haben möchtest, welches Steuerungpfeile anzeigt, musst Du folgenden Code am Ende Deines html-Templates einfügen (direkt vor dem Marker "<!-- ###DOCUMENT### end -->"):

    <div id="controlbar" class="highslide-overlay controlbar">
        <a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
        <a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
        <a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
        <a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
    </div>

Highslide kann bis ins Detail angepasst werden. Schau Dir die Beispiele an, die Torstein Hønsi auf der Website von Öffnet externen Link in neuem FensterHighslideJS anbietet, oder die, welche beim Herunterladen der Dateien beigefügt sind.
Das Ergebnis sieht dann so aus:

Flags

Jetzt bookmarken:del.icio.us

Kommentare

2 Antworten zu “HowTo: Highslide in Typo3”

  1. Daniel Veit sagt:

    Danke dir für die Arbeit!

  2. Philipp sagt:

    Gern geschehen :).

Aufgrund von Serverproblemen ist die Kommentarfunktion zur Zeit deaktiviert.