Menü

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.
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; }

weiterlesen auf Seite 2
Inhaltsverzeichnis 1/4
 
Whitepaper Lexware-Logo
Content-Revolution Wie Sie professionelles Content-Marketing betreiben.
Haptik-Effekt Im Einsatz im multisensorischen Marketing.
x