Dieser Eintrag ist vom 11.08.08 in den Kategorien Typo3, How to.

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

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 http://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: highslide.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 HighslideJS anbietet, oder die, welche beim Herunterladen der Dateien beigefügt sind.
Das Ergebnis sieht dann so aus: