jQuery-Slider werden häufig für die dynamische Darstellung von Beiträgen, Produkten und Galerien verwendet und vor allem auf modernen Webseiten eingesetzt. Früher wurde diese Art der Darstellung meist mit Flash umgesetzt. Da JavaScript und Html jedoch bei weitem suchmaschinenfreundlicher sind, haben sich die zahlreichen JavaScript Frameworks und allem voran jQuery inzwischen durchgesetzt.

Schön ist auch, dass es für fast jedes Vorhaben bereits fertige jQuery Plugins gibt. Eine schöne Zusammenstellung verschiedenster jQuery Slider ist nun auf antsmagazine.com zu finden. 50 der besten Slider wurden hier in einer Übersicht zusammengestellt:

http://www.antsmagazine.com/50-jquery-sliders-you-will-love-to-use

Rotating Image Slider With Jquery [DEMO]

Beispiel jQFullscreen Gallery With Thumnail Flip [DEMO]

Beispiel jQuery-Slider ImageFlow [DEMO]:

URL: http://www.antsmagazine.com/50-jquery-sliders-you-will-love-to-use

html2canvas ist ein eindrucksvolles Skript, das Screenshots von Webseiten (oder Teile davon) erzeugen kann und das clientseitig, nur mit Hilfe von JavaScript.

html2canvas

Wie  jeder Browser rendert das Script Seiten unterschiedlich und das Ergebnis ist manchmal nicht ganz perfekt. Die Bibliothek ist noch experimentell, da es noch verschiedene CSS3 Eigenschaften gibt, die nicht unterstützt werden. Allerdings funktioniert es dennoch recht gut, wovon man sich auf der Demoseite überzeugen kann.

Voraussetzungen: jQuery
Website: http://html2canvas.hertzen.com/
Demo: http://html2canvas.hertzen.com/screenshots.html

The Wall ist ein MooTools Plugin zur Erstellung eines Inhaltsbereichs, der vertikal sowie horizontal verschoben werden kann.

Das Plugin bietet eine hohe Flexibilität und kann auf jedes Element angewandt werden, egal ob es sich um ein <div> oder ein <image> Tag handelt.

Die Galerie, welche erzeugt wird, kann durch Ziehen in die gewünschten Richtung verschoben werden. Übergänge und die Geschwindigkeit können individuell angepasst werden. Eine Callback-Funktion nach jeder Benutzer Interaktion hilft dabei, das Plugin noch weiter anzupassen.

Außerdem stehen noch weitere andere Funktionen bereit, wie z. B. das “spiegelverkehrte Ziehen”, automatische Slideshow etc.

Voraussetzungen: MooTools 1.3.2 +
Kompatibilität: Alle gängigen Browsern
Webseite: http://wall.plasm.it/
Demo: http://wall.plasm.it/examples
Download: https://github.com/plasm/the-wall

Die drei wichtigsten Prüfungen (Eingabe erforderlich (required), numerische Eingaben (numeric) und die Überprüfung der Email-Adresse auf korrektes Format (email-format)) sind vordefiniert und es können Weitere per Regular Expressions hinzugefügt werden.

Mit dem integrierten “Invalid Handler” werden invalide Felder direkt angesprochen und die Verhaltensweise kann schnell geändert und verbessert werden.

Website: http://validval.frebsite.nl

Website: http://candrews.net/sandbox/spryMap/

<input onclick="this.type='hidden';" name="blabla" type="button" value="blabla" />

Ein Workaround ist es, das Feld per JavaScript zu entfernen und mit den gleichen Attributen neu zu erstellen. Hierzu kann man eine Funktion nach folgendem Schema verwenden:

function changeInputType(oldObject, Type) {
  var newObject = document.createElement('input');
  newObject.type = Type;
  if(oldObject.size) newObject.size = oldObject.size;
  if(oldObject.value) newObject.value = oldObject.value;
  if(oldObject.name) newObject.name = oldObject.name;
  if(oldObject.id) newObject.id = oldObject.id;
  if(oldObject.className) newObject.className = oldObject.className;
  oldObject.parentNode.replaceChild(newObject,oldObject);
  return newObject;
}

In unserem Beispiel von oben würde das dann so funktionieren:

<input onclick="changeInputType(this,'hidden');" name="blabla" type="button" value="blabla" />

CSS-Dateien verlinken

Per Hotlink lädt man die CSS-Dateien direkt von Google.com.
Anhand der URL-Parameter werden die Schriftarten sowie die Variationen dieser Schriftarten bestimmt.

Einfaches Beispiel:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">

Etwas aufwändiger:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=
Inconsolata:italic,bolditalic|Droid+Sans">

CSS

Im eigenen CSS-File können diese Schriftarten für jedes beliebige Element festgelegt werden:

body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; }

FontLoader

Anstelle auf das CSS bei Google.com zu verlinken, kann der JavaScript WebFont Loader verwendet werden. Dies hat Vorteile wie z.B. die Kontrolle über das “Flash of Unstyled Text” (FOUT), aber auch Nachteile, wie die Tatsache, dass die Schriftarten bei deaktiviertem JavaScript nicht geladen werden.

<script type="text/javascript">// <![CDATA[
WebFont.load({
google: {
families: ['Cantarell']
}
});
// ]]></script>

Klassennamen wie .wf-loading werden auf die entsprechenden HTML-Elemente angewendet.
Wenn die Schriftarten geladen werden, können diese Klassennamen verwendet werden, um den Text zu verstecken/auszublenden. Dann wenn sie fertig geladen sind, müssen sie wieder sichtbar gemacht werden. So funktioniert FOUT.

Websites: http://paulirish.com/2010/details-on-the-new-google-webfont-api/
http://code.google.com/webfonts

jQuery.popeye ist ein Bildergalerie-Script basierend auf der JavaScript-Bibliothek jQuery. Hiermit kann platzsparend eine ganze Sammlung von Bildern angezeigt werden. Außerdem können Bilder vergrößert werden, ohne das Layout der Seite zu verlassen.

Es wurde als Alternative zu der oft gesehenen JavaScript Image Lightbox entworfen. Alle Lightbox Versionen benutzen jedoch ein modales Fenster um die großen Bilder anzuzeigen, sodass sie die Interaktion auf der Website stören. jQuery.popeye nimmt einen anderen Ansatz: Es erlaubt alle Thumbnails sowie die großen Bilder an einer festen Position zu durchsuchen und  ermöglicht so ein weniger störendes Benutzererlebnis als bei modalen Fenstern.

Demo: http://dev.herr-schuessler.de/jquery/popeye/demo.html

Cloud Zoom ist ein jQuery-Plugin und vergleichbar mit kommerziellen Image-Zoom Produkten wie Magic Zoom. Im Vergleich zu den populären jQ-Zoom Plugins ist Cloud Zoom jedoch kleiner, hat mehr Funktionen und zeichnet sich zudem durch eine gute Kompatibilität mit verschiedenen Browsern aus und wurde auf IE6 +, Firefox, Chrome, Opera sowie Safari getestet.

Man kann eine beliebige Farbüberlagerung für das kleine Bild hinzuzufügen. Die Intensität der Färbung ist auch anpassbar. Die  Zoom Position kann innerhalb des kleineren Bildes definiert werden. Zudem kann ein Weichzeichner-Effekt auf das kleine Bild angewand werden. Und das Beste zum Schluss: Cloud Zoom ist völlig kostenlos.

Website: http://www.professorcloud.com/mainsite/cloud-zoom.htm

Cloud Zoom Typo3 Extension

Es gibt außerdem eine schöne, einfach konfigurierbare Typo3 Extension von Juergen Furrer. Ein Demo gibt es hier: http://lautundklar.de/was-wir-tun/typo3-extensions/image-zoom/

Flip! ist ein jQuery-Plugin, das es ermöglicht jedes HTML, Text oder jQuery Element zu drehen, denn leider funktionieren die CSS3 Reglen hierfür nicht browserübergreifend: Webkit.
-webkit-transform: rotate(0deg);  Firefox: moz-transform: rotate(0deg);

Mit Hilfe des Plugins ist es möglich, die Richtung des Effektes zu bestimmen, von rechts nach links, von oben nach unten
oder anders herum, den Inhalt nach der Umdrehung zu ändern oder dessen Hintergrund.

Außerdem kann man die Geschwindigkeit der Animation definieren und folgende Funktionen verwenden:
onBefore, onAnimation und onEnd.

Website: http://lab.smashup.it/flip/
Download: http://github.com/roncioso/Flip-jQuery