Mit HTML5 wurden einige neue Funktionen hinsichtlich der vereinfachten Programmierung von Formularen eingeführt. So gibt es beispielsweise Formularelemente für Datumsfelder oder eine Slider-Element. Das Problem dabei (wie so oft): Unterstützt werden diese neuen Funktionalitäten nur von modernen Browsern, aber das auch nicht zu 100% - und auf den Internet Explorer möchte ich hierbei gar nicht näher eingehen ...

Aus diesem Grund ist es notwendig, Fallback-Lösungen mittels JavaScript zu einzubauen. Eine mögliche Variante ist es dabei, mittels der weit verbreiteten Bibliothek Modernizr auf das Vorhandensein der HTML5-Funktionalität zu überprüfen. Ist die Überprüfung negativ, wird ein zuvor definierter JavaScript-Code angesprochen. Das kann z.B. der Datepicker der jQuery User Interfaces sein.

Weiters erwähnenswert zu diesem Thema ist webforms2 – eine JavaScript Bibliothek für HTML5 Formulare. Ein jQuery-Plugin von webforms2 steht ebenfalls zur Verfügung.

Im Artikel „How to Build Cross-Browser HTML5 Forms“ wird auf verständliche Weise beschrieben, wie die zuvor genannten Technologien miteinander verwendet werden können - sehr lesenswert!

Da mein Artikel "Fancybox in TYPO3 integrieren" doch immer wieder einige Besucher hat, möchte ich auf eine kleine Aktualisierung beim Update auf TYPO3 4.5.0 aufmerksam machen.

Das in meinem Artikel erwähnte TypoScript muss um zwei Zeilen ergänzt werden, ansonsten funktionieren Links auf Bilder (auch ohne Fancybox) unter TYPO3 4.5.0 nicht mehr. Der aktualisierte Code sieht nun wie folgt aus:

tt_content.image.20.1 {
  # Den Standard imageLinkWrap entfernen und einen eigenen basteln
  imageLinkWrap >
  imageLinkWrap = 1
  imageLinkWrap {

    # Linkwrapping bei aktivierter Klickvergrößerung oder einem gesetzten Link
    enable.field = image_zoom
    enable.ifEmpty.typolink.parameter.field = image_link
    enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
    enable.ifEmpty.typolink.returnLast = url
    enable.ifEmpty.typolink.parameter.listNum.splitChar = 10

    # Neuer wrapping Code
    typolink {
      target = {$styles.content.links.target}
      extTarget = {$styles.content.links.extTarget}

      # Link mit Pfad und Name zum Originalbild oder
      # Pfad und Name des umgerechneten lightbox Bild (wen maxH oder maxH erreicht ist)
      parameter.cObject = IMG_RESOURCE
      parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile

      # Ausnahme: wenn das linkfield nicht leer ist
      parameter.override.field = image_link
      parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
      parameter.override.if.isTrue.field = image_link
      parameter.override.listNum.splitChar = 10

      # rel-Attribut hinzufügen, für Galerie-Funktion (durchblättern)
      ATagParams = rel="gallery" title="{field:header}" class="lightbox"
      ATagParams.override = rel="gallery{field:uid}" title="{field:header}" class="lightbox"
      ATagParams.insertData = 1
      ATagParams.if.isTrue.field = image_zoom
    }
  }
}

Neu hinzugekommen sind die Zeilen 12 und 28. Fügt man diese ein, funktioniert wieder alles ohne Probleme. Kurz noch den TYPO3-Cache löschen und es kann schon weiter gehen.

Achtung: Unter TYPO3 4.5 ergeben sich kleinere Änderungen bei der Verwendung von Fancybox unter TYPO3! Hier das Update für Version 4.5 in einem separaten Artikel.

Auf einer Vielzahl von Websites ist die allseits bekannte Lightbox in Verwendung. Eine Lightbox ist eine Art Pop-Up. Dabei wir die Website abgedunkelt und meist ein Foto legt sich über die Seite. Aber nicht nur Fotos, sondern alle Arten von Inhalten bis hin zu gesamten Websites können in einer Lightbox dargestellt werden.

Mittlerweile gibt es verschiedenste Lightbox-Skripte. Wir bei KEYNET setzen in letzter Zeit bei unseren Lösungen zumeist das jQuery-Plugin Fancybox ein, da damit die Darstellung von verschiedenen Inhaltstypen untestützt wird. Aus diesem Grund zeigen wir hier kurz, wie die Fancybox ohne Verwendung einer Extension in TYPO3 integriert werden kann. Es gibt auch eine Fancybox-Extensions, allerdings ist es angenehmer, die volle Kontrolle über die Steuerung des Skripts zu haben.

Zuerst fügen wir folgendes TypoScript in unser Template ein:

tt_content.image.20.1 {
  # Standard imageLinkWrap entfernen & eigenes Linkwrapping starten
  imageLinkWrap >
  imageLinkWrap = 1
  imageLinkWrap {

    # Linkwrap bei Klickvergrößerung oder gesetzten Link
    enable.field = image_zoom
    enable.ifEmpty.typolink.parameter.field = image_link
    enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
    enable.ifEmpty.typolink.returnLast = url

    # Der neue Code für das Wrapping
    typolink {
      target = {$styles.content.links.target}
      extTarget = {$styles.content.links.extTarget}

      # Link mit Pfad und Name zum Originalbild oder
      # Pfad und Name des umgerechneten Lightbox Bild
      parameter.cObject = IMG_RESOURCE
      parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile

      # Ausnahme: wenn das linkfield nicht leer ist
      parameter.override.field = image_link
      parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
      parameter.override.if.isTrue.field = image_link

      # rel-Attribut hinzufügen, für Galerie-Funktion
      ATagParams = rel="gallery" title="{field:header}" class="lightbox"
      ATagParams.override = rel="gallery{field:uid}" title="{field:header}" class="lightbox"
      ATagParams.insertData = 1
      ATagParams.if.isTrue.field = image_zoom
    }
  }
}

Damit es nun funktioniert, fehlt noch folgender JavaScript-Code (beinhaltet zudem die Anweisung für die Darstellung von anderen Websites per iFrame):

// Image
$("a.lightbox").fancybox({
  'zoomSpeedIn': 300,
  'zoomSpeedOut': 300,
  'overlayShow': true
 });

// iFrame Content
$("a.lightbox-page").fancybox({
  'zoomSpeedIn': 300,
  'zoomSpeedOut': 300,
  'overlayShow': true,
  'width': 650,
  'height': 280,
  'titleShow': false,
  'autoScale' : true,
  'type': 'iframe'
 });

Nun kann man über den Inhaltstyp "Text mit Bild" oder "Bild" die Fancybox durch Verwendung von "Klick-Vergrößern" verwenden. Weiters ist es möglich sich im RichTextEditor von TYPO3 verschiedene CSS-Klassen zu definieren, die man danach Links zuweisen kann. Klickt man danach auf einen dieser Links, wie das Linkziel in der Fancybox angezeigt.

Heute stelle ich nettes jQuery-Plugin, zur Darstellung von vollformatigen Fotos als Hintergrundbild, vor. Auf das Plugin bin ich bei der Entwicklung der neuen KEYNET-Website gestoßen, da der Inhaltsbereich durch ein fix positioniertes Bild begrenzt werden sollte.

Das gerade einmal 3.7 KB große Plugin bietet einige Einstellungsmöglichkeiten, wie etwa eine Slideshow, die die Fotos automatisch rotieren lässt. Auf der Website des Plugins können die einzelnen Optionen nachgelesen werden.

Ein kleiner Performance Tipp:

Falls Ihr kein Script verwendet, das alle JavaScript oder CSS-Dateien auf ein File zusammenfügt, bindet nicht, wie auf der Website des Plugins beschrieben, die mitgelieferte CSS-Datei als als externe Resource ein, sondern kopiert den Inhalt der CSS-Datei in Euer eigentliches Stylesheet ein. Es sind gerade einmal 18 Zeilen CSS-Code, die das eigene CSS-File sicher nicht unübersichtlich werden, aber zugleich eine unnötigen HTTP-Request weg lassen.

<script type="text/javascript" src="fileadmin/js/bgstretcher.js"></script>
<script type="text/javascript" src="fileadmin/js/scripts.js"></script>

$(document).ready(function(){
	$(document).bgStretcher({
		images: ['fileadmin/img/bg_pics/pic1.jpg'],
		imageWidth: 1024, imageHeight: 768
	});
});

#container {
  position: relative;
  z-index: 2;
}

Das war es dann auch schon! Eventuell, wenn das Plugin wie bei mir unter TYPO3 verwendet wird, noch den Cache des Redaktionssystem leeren.