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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".