Effekte im Trend Slider und Web-Portfolios mit jQuery
© Internet Magazin
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:
Übersicht von Bildminiaturen
Der Quelltext für die kleinen Miniaturbilder im rechten Bereich könnte beispielsweise so aussehen:
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:
