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

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
Video
Kinostart: 23.11.2017