Effekte im Trend

Die Ereignisauswertung

Für den hover-Zustand gilt:

.miniaturbilder ul li.hover {
background: #ddd;
cursor: pointer;
}

und für den aktiven Zustand:

.miniaturbilder ul li.active {
background: #fff;
cursor: default;
}
html .miniaturbilder ul li h2 {
font-size: 1.5em;
margin: 5px 0;
padding: 0;
}
.miniaturbilder ul li .block {
float: left;
margin-left: 10px;
padding: 0;
width: 170px;
}

Mittels:

.miniaturbilder ul li p{display:
none;}

werden die Beschreibungen der Miniaturbilder in der Liste ausgeblendet. Zu guter Letzt kann jetzt das Verhalten der Bilder programmiert werden.

Bildbeschreibung und Transparenz

Um eine sogenannte sanfte Qualitätsminderung (graceful degradation) in älteren Browsern zu gewährleisten, ist die Kurzbeschreibung der Detailansicht standardmäßig deaktiviert (siehe den Quelltext-Abschnitt mit der CSS-Klasse .grosse_abbildung .beschreibung) Die Beschreibung wird also angezeigt, falls Javascript aktiviert ist:

$(".grosse_abbildung .beschreibung").
show(); // Der Banner wird angezeigt

Sollte Javascript nicht verfügbar sein - was in der Praxis so gut wie nie vorkommt - würde eben stillschweigend auf das Anzeigen der Bildbeschreibung verzichtet. Mittels:

$(".grosse_abbildung .block").
animate({ opacity: 0.85 }, 1 );

wird die Opazität der gleitenden Registerkarte, die beim Ausblenden in der Seite versinkt, auf 85 Prozent gesetzt.

Die Ereignisauswertung

Beim Anklicken einer der Bildminiaturen in der Liste soll das zugehörige Foto in der Detailansicht erscheinen. Dazu wird dem ersten Element der Liste die active-Klasse zugewiesen, um die Detailansicht vor jeglichen Benutzerinteraktionen festzulegen.

$(".miniaturbilder ul li:first").
addClass('active');

Der Code der Ereignisauswertung beginnt mit der Variableninitialisierung:

$(".miniaturbilder ul li").
click(function(){
var imgAlt = $(this).find('img').
attr("alt"); // Inhalt des Alt-Tags
var imgTitle = $(this).find('a').
attr("href"); // Titel des Bild-elementes aus dem <a>-Tag der Hauptabbildung
var imgDesc = $(this).find('.block').
html(); // HTML-Code des "block"-Containers
var imgDescHeight = $(".grosse_
abbildung").find('.block').height(); // Höhe des "block"-Containers

Falls das betreffende Listenelement aktiv oder bereits ausgewählt ist (Fall 1), wird der Browser weitere Klicks auf das Element ignorieren. Dadurch lässt sich ein Fehlverhalten der Animation bei wiederholten Klicks verhindern. Ist das Element jedoch inaktiv (Fall 2), löst ein Klick darauf die Animation der hinaus- und hinein gleitenden Kurzbeschreibung aus:

if ($(this).is(".active")) { // Fall 1.
return false; // Resultat 1.
} else { // Fall 2.
// Resultat 2.
$(".grosse_abbildung .block").
animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { // Schritt 1.
$(".grosse_abbildung .block").
html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); // Schritt 2.
$(".grosse_abbildung img").attr({
src: imgTitle , alt: imgAlt}); // Schritt 3.
});
}

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.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…