Effekte im Trend

Slider und Web-Portfolios mit jQuery

Effekte auf Basis von jQuery, allen voran Slider und Webportfolios sind groß im Kommen. Wir zeigen einen Überblick über die Fülle existierender Lösungen.

  1. Slider und Web-Portfolios mit jQuery
  2. Das CSS -Grundgerüst
  3. Die Ereignisauswertung
  4. Fazit
internet, webdesign, slider, jquery, portfolios, html, javascript, programmierung

© Internet Magazin

Slider und Web-Portfolios mit jQuery

Die Beliebtheit von jQuery lässt nicht nach, im Gegensatz, jQuery-basierte visuelle Präsentationen wie Slider und Webportfolios zählen zunehmend zum guten Ton, nicht zuletzt auf Grund der Eleganz der Umsetzung.

Das Grundgerüst eines Webportfolios

Zuerst gilt es ein HTML-Grundgerüst für ein Webportfolio zu erstellen, dann wird das Markup mit den erforderlichen CSS-Klassen und -IDs gekennzeichnet und an jQuery angebunden; schließlich entsteht der fertige Javascript-Code.Im Beispiel besteht das Webportfolio aus zwei unterschiedlichen Bereichen: aus der Detailansicht eines Fotos mit einer gleitenden Bildunterschrift (auf der linken Seite) und rechts davon aus einer Übersicht von Miniaturen.Für den Benutzer soll es möglich sein, die Detailansicht jeder einzelnen dieser Miniaturen anzufordern und die zugehörige Kurzbeschreibung ein- und auszublenden. Dieser Text soll einfach nach unten gleiten und scheinbar innerhalb der Seite versinken.

Detailansicht

Der Quelltext für die jeweilige Detailansicht könnte zum Beispiel wie folgt aussehen:

<div class="grosse_abbildung"><img src="banner1.jpg" alt="" /><div class="beschreibung"><a href="#" class="collapse">Bitte
schliessen!</a><div class="block"><h2>Titel</h2><small>Datum</small><p>Text</p></div></div>

Übersicht von Bildminiaturen

Der Quelltext für die kleinen Miniaturbilder im rechten Bereich könnte beispielsweise so aussehen:

<div class="miniaturbilder"><ul><li><a href="banner1.jpg"><img
src="banner1_mini.jpg" alt="Bildername" /></a><div class="block"><h2>Titel</h2><small>Datum</small><p>Text</p></div></li></ul></div>

Das CSS -Grundgerüst

Nun gilt es, den CSS-Abschnitt zu erstellen, um dem Quelltext CSS-gesteuert das gewünschte Aussehen zu verleihen. Zuerst beginnen wir mit dem CSS-Abschnitt grosse_abbildung:

.grosse_abbildung {
width: 598px;
height: 456px;
float: left;
background: #333;
position: relative;
overflow: hidden;
color: #fff;
}

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…