Effekte im Trend

Fazit

image.jpg

© Internet Magazin

Das finale Resultat im Webbrowser.

Im ersten Schritt gleitet der gesamte block-Container, in dem sich die Beschreibung der zuvor aktiven Detailansicht befindet, hinaus, und versinkt hinter dem unteren Rahmen. Als Nächstes (Schritt 2) tauscht das Skript den HTML-Code des gesamten Elementes aus, der Container gleitet hoch und erlangt eine Opazität von 85 Prozent. Danach wird die Detailansicht ausgetauscht und zwar nicht nur die URL sondern auch das Alt-Tag (Schritt 3).Um die Anzeige des aktiven Eintrags in der Übersicht der Bildminiaturen zu aktualisieren, wird erst einmal die Klasse active von allen Elementen der Liste entfernt.

$(".image_thumb ul li").removeClass
('active'); // Klasse entfernen

Danach wird die Klasse active der aktuellen Auswahl zugewiesen:

$(this).addClass('active'); //Klasse
neu zuweisen
return false;
})

Schließlich gilt es noch, das hover-Verhalten zu definieren:

.hover(function(){ //Hover effects on
list-item
$(this).addClass('hover'); //
"hover"-Klasse hinzufuegen
}, function() {
$(this).removeClass('hover'); // bei
Mausentfernung "hover"-Klasse entfernen
});

Idealerweise würde man dem Paradigma der graceful degradation noch deutlich besser durch die Implementierung einer Ersatzfunktionalität ohne Javascript gerecht. Der Aufwand wäre jedoch überproportional groß zum Nutzen, denn die Suche nach einem Browser ohne Javascript ist wie die Suche nach der sprichwörtlichen Nadel im Heuhaufen.

Fazit

Für Websites mit visuellen Ansprüchen gehört ein eleganter Slider oder eine interaktive Galerie auf Basis von jQuery praktisch zum Pflichtenheft. Zum Glück lassen sich interaktive Effekte auf Basis von jQuery - sowohl mit als auch ohne weitere Plug-ins - vergleichsweise einfach und intuitiv umsetzen.

Die effektvollsten Plug-ins für jQuery

Viele interessante Effekte lassen sich auch mit den geeigneten jQuery-Plug-ins umsetzen.SlidedeckPreis: Lite-Version mit Hersteller-Branding kostenlos, ansonsten ab 99 US-Dollar pro  www.slidedeck.com Mit seinen weit über hunderttausend Downloads rühmt sich Slidedeck, die führende Lösung für jQuery-basierte Slider zu sein. Die Pro-Version schlägt mit mindestens 99 US-Dollar pro Website zu Buche, bietet jedoch einen deutlich umfassenderen Leistungsumfang als die kostenlose Lite-Version des Plug-ins. Zu den erwähnenswerten Features zählen die Unterstützung für Touch-Gesten und die Fähigkeit, Daten aus einem RSS-Feed zu beziehen; beide nur in der kostenpflichtigen Pro-Version verfügbar. Die kostenlose Version beinhaltet im Übrigen Branding des Herstellers.SupersizedPreis: kostenlos buildinternet.com/project/supersized/ Supersized erzeugt Slideshows, die im Hintergrund der Seite, also unterhalb anderer Elemente, ablaufen und das gesamte Browserfenster füllen.jShowOff

image.jpg

© Internet Magazin

jShowOff

Preis: kostenlos (Spenden via Paypal sind willkommen) ekallevig.com/jshowoff Jshowoff erlaubt das Abspielen einer Diashow, bestehend aus Bildern und Text, in einem abgegrenzten Bereich der Webseite, mit intuitiven Navigationselementen und optionalen Transparenzeffekten.Topup (derzeit noch in einer Betaversion)Preis: kostenlos www.gettopup.com Mit Topup lassen sich Diashows in einem Lichtbox-Effekt oberhalb anderer Seitenelemente vorführen.Lightwindow v2.0Preis: kostenlos www.p51labs.com/lightwindow/ Lightbox2 ist ein vielseitiges Plug-in zum Präsentieren von Bildern und anderen Dokumenten, einschließlich ganzer Webseiten, in einem eleganten Lightbox-Overlay mit zahlreichen Zusatzfunktionen.SidewawaysPreis: kostenlos www.manos.malihu.gr/sideways-jquery-fullscreen-image-gallery Mit Sideways entstehen beeindruckende Diashows, die das ganze Browserfenster in Anspruch nehmen.QuicksandPreis: kostenlos www.razorjack.net/quicksand/ Quicksand animiert das Sortieren von Bildelementen im Stil des Mac OS X-Finders.jQuery SpritelyPreis: kostenlos www.spritely.net jQuery Spritely unterstützt die Erstellung von recht beeindruckenden Animationen aus Text und Bildern mit reinem HTML, CSS und jQuery.Pirobox 1.1 (derzeit noch Beta)Preis: kostenlos www.pirolab.it/pirobox/feb_2011.html Pirobox erzeugt Bildpräsentationen in einem Lightbox-Overlay mit beeindruckenden Übergängen.S3sliderPreis: kostenlos www.serie3.info/s3slider S3slider erlaubt es Ihnen, beeindruckende Bildpräsentationen mit gleitenden Bildunterschriften, jedoch leider ohne Kontrollelemente, direkt im Layout der Webseite zu platzieren.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Video
SciFi-Action mit Ryan Gosling und Harrison Ford
Video
Agatha-Christie-Verfilmung mit Johnny Depp