Category: CSS

Hier noch 2 Beispiel wie man die clickEnlarge Funktion von TYPO3 abwandeln kann:
klicken für Demo 1
klicken für Demo 2

Wie genau das angestellt wurde zeige ich auch noch, heute ist es aber einfach schon zu spät dafür.

von: www.elemente-websolutions.ms/blog/

Jeder TYPO3 Redakteur kennt die kleine Checkbox im Inhaltselement “Bild” oder “Text mit Bild”: “Klick-Vergrößern” für Bilder. Hinter diesem recht eigenartigen Wortkonstrukt verbirgt sich nichts anderes als die Funktionalität bei Mausklick auf ein kleines Vorschaubild eine entsprechend größere Variante des gewünschten Bildes in einem neuen Fenster anzuzeigen.
Das Problem dieser nützlichen Funktion zeigt sich allerdings an der Präsentation der selben auf der Website: Der Besucher kann auf dem ersten Blick diese gar nicht erkennen, sind die “klick-vergrößerten” Bilder von Normalen doch nicht zu unterscheiden. Eine Lupe als Symbol eignet sich gut, um dem Benutzer einen visuellen Hinweis zu bieten, aber dieses Icon jedes Mal in das gewünschte Bild zu integrieren und zu speichern ist recht praxisfern und kann für den normalen TYPO3-Redakteur nicht bewerkstelligt werden. Zudem würde die Lupe im Bild auch erscheinen, wenn der Besucher die vergrößerste Ansicht des Bildes betrachtet.
Die Lösung für dieses Problem liefern in ein paar Zeilen TYPOscript und eine Javascript-Funktion. Mit folgendem TYPOscript wird der stdWrap des Inhaltselements “IMAGE” um das Lupensymbol erweitert:

tt_content.image.20 {
  1 {
    stdWrap.innerWrap (
          |
          
    )
    stdWrap.innerWrap {
      if.isTrue.field = image_zoom
      ifEmpty.field = image_link
    }
  }
}

Hiermit wird hinter dem eigentlichen Link für die “Klick-Vergrößern”-Funktionalität ein weiterer eingefügt, der mit der notwendigen Javascript-Funktion versehen ist und eine beliebige Grafik enthält – eben die besagte Lupe als Hinweis für den Besucher. Die Javascript-Funktion “openPreviousLink” ist ein Einzeiler und ruft das onclick-Ereignis des vorherrigen A-Tags auf:

function openPreviousLink(elem) {
    elem.parentNode.getElementsByTagName('a')[0].onclick();
}

Fertig ist unsere Lupe, die unter http://www.elemente-websolutions.ms als Plus-Symbol am unteren, rechten Bildrand integriert wurde. Mit ein wenig TYPO- und Javascript-Kenntissen kann die “Lupe” abgewandelt und auf Erweiterungen wie “tt_news” übertragen werden. Somit erhält der Besucher einer Website nun endlich ein hilfsreiches “Feature”, die Userability steigt.

Comment: Der Code hat mir bei einem aktuellen TYPO3 Template sehr geholfen. Danke