1. Slidedeck

Ein sehr schöner Content-Slider im Accordion-Style. Slidedeck eignet sich super für eine Featured Projects.

2. Flip

Ein bisschen drehen und wenden gefällig? Mit Flip kannst du deine Projekte mit einer spannenden Animation präsentieren.

3. qtip

Egal ob Bilder oder Infotext, die qtips sehen schick aus und sind praktisch, um zusätzliche Inhalte unterzubringen.

4. Quicksand

Möchtest du deine Projekte nach Themen sortieren? Dann ist das Quicksand-Plugin genau das Richtige für dich. Ein wunderschönes Beispiel kannst du dir z.B. auf der Portfolio-Seite von Creative Spark anschauen.

5. Nivoslider

Nivoslider ist wohl der schönster jQuery Bilder-Slider derzeit. Du kannst aus mehreren Überblendungs-Optionen wählen und die Styles mit CSS anpassen.

6. Captipy

Mit diesem Plugin kannst du deinen Bildern schön animierte Bild-Unterschriften (Captions) hinzufügen.

7. prettyphoto

Eine der schönsten Lightbox-Varianten mit 5 verschiedenen Styles zur Auswahl.

8. Fancybox

Eine weitere sehr schöne Lightbox-Variante. Du kannst den Effekt wählen, wie deine Bilder eingeblendet werden sollen.

9. Galleria

Galleria ist ein praktisches und super schickes Fotogalerie-Plugin.

10. jQZoom

Mit jQZoom kannst du Detailansichten deiner Bilder per Mouse-Rollover hervorheben.

Beispiele schöner Portfolios

Auf diesen wunderschönen Portfolio-Seiten findest du jede Menge Inspiration, wie du die JavaScript-Plugins verwenden kannst.

1. CPeople

JavaScript-Elemente: Slider, Slide Up/Down

2. Rich Brown

JavaScript-Elemente: Lightbox

3. x3 Studios

JavaScript-Elemente: Carousel Slider

4. Galan Design

JavaScript-Elemente: Slider und Lightbox

5. Kitfolio

JavaScript-Elemente: Featured Slider mit Captions

6. Rokkan

JavaScript-Elemente: Image-Slider

7. Magouya

JavaScript-Elemente: Tooltips und Lightbox

8. dataselected

JavaScript-Elemente: Accordion und Image-Slider

Wie gefallen dir die Plugins und Beispielseiten? Kennst du weitere schöne Portfolio-Webseiten mit JavaScript-Elementen? Über deine Tipps und dein Feedback würde ich mich sehr freuen.

Ähnliche Artikel zu diesem Thema

1. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
2. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
3. Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen
4. JavaScript Dropdown-Menüs mit Superfish
5. Meine Top 10 JavaScript-Plugins

1. Nivo Slider

Der Nivo-Slider ist ein wunderschöner, cleaner jQuery Image-Slider. Du kannst aus 9 verschiedenen Überblendungen wählen, Captions einfügen, und deine Bilder verlinken. Die Styles des Sliders sind einfach anzupassen.

2. Meerkat jQuery Plugin

Mit dem Meerkat-Plugin kannst du versteckte Elemente an allen vier Seiten deiner Webseite einfaden / bzw. sliden lassen. Der Inhalt scrollt nicht mit der restlichen Seite mit. Eine tolle Möglichkeit um zusätzliche Elemente, wie z.B. ein Kontaktformular, die Suche oder Links zu deinen Social Sites zu integrieren.

3. Pretty Photo

Pretty Photo ist eine sehr schöne Lightbox-Variante, die neben Bildern auch Videos, Flash-Filme, YouTube- und Vimeo-Videos, und iFrames unterstützt.

4. qTips

qTips ist ein super flexibles und vielseitiges jQuery-Tooltips Plugin. Du kannst Texte oder Bilder einfügen, verschiedene Styles wählen, und die Postion der Tooltips bestimmen.

5. Jquery Quicksand Plugin

Mit dem Quicksand Plugin kannst du Elemente auf deiner Webseite mit Hilfe einer coolen Shuffle-Animation sortieren.

6. gMaps

gMaps ist ein tolles jQuery-Plugin, mit dem du GoogleMaps-Karten auf deiner Webseite integrieren kannst.

7. jQuery Captify Plugin

Mit jQuery Captify kannst du elegant-animierte Bildunterschriften bei Maus-Rollover einfügen.

8. jQZoom

jQZoom erzeugt ein Lupen-Effekt bei Bildern, sobald man die Maus über das Bild bewegt.

9. Galleria

Galleria ist eine sehr schöne jQuery Bilder-Galerie mit einer klassischen, einer Lightbox- und einer FullScreen-Variante.

10. Superfish – jQuery Menu Plugin

Superfish ist ein leicht zu verwendendes jQuery-Plugin, für angenehm animierte Dropdown-Menüs. Möchtest du mehr über das Plugin erfahren? Dann schau doch mal in folgendes Tutorial rein!

11. Coda Slider

Coda Slider ist einer DER Klassiker unter den JavaScript-Slidern, und mit seinen zahlreichen Optionen super flexibel einsetzbar.

12. jQuery ListMenu Plugin

Mit Hilfe des ListMenu-Plugins kannst übersichtliche Untermenüs in Stil der Reuters-Webseite integrieren. Das Plugin ist super für komplexe Seiten mit jeder Menge Infos und vielen Untermenüs geeignet.

Wie gefallen dir die jQuery-Plugins? Kennst du weitere praktische Plugins, die auf modernen Webseiten nicht fehlen sollten? Über dein Feedback und deine Tipps würde ich mich sehr freuen?

Ähnliche Artikel zu diesem Thema

1. Die 10 schönsten JavaScript-Plugins für dein Portfolio
2. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
3. JavaScript Dropdown-Menüs mit Superfish
4. Meine Top 10 JavaScript-Plugins
5. 10 Javascript Lightboxes im Vergleich

1. Vtravelled

2. Sleepover

3. Casey Dunn Photography

4. Piipe

5. Delibar

6. Paramore Redd

7. Fresh 01

http://blog.vtravelled.com/“>

8. Veerle’s Blog

9. Creanto

10. Brizk Design

Wie gefallen dir diese JavaScript-Elemente? Nutzt du selbst gerne JavaScript oder kennst du weitere Webseiten, die JavaScript geschickt einsetzen? Ich freue mich sehr auf dein Feedback und deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
2. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
3. Webdesign Inspiration: 40 kreative Kontaktformulare
4. Die 10 schönsten JavaScript-Plugins für dein Portfolio
5. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest

Und so funktioniert’s

Sobald du dein Plugin installiert und deine erste Galerie mit Bildern gefüllt hast, klicke in den Optionen des Plugins auf Optionen und dann auf Effekte. Du hast die Möglichkeit aus fünf unterschiedlichen JavaScript-Stilen deinen Favorit auszuwählen. Wähle hier die Lightbox aus.

Da nur Thickbox und der standardmäßig eingestellte Shutter-Effekt automatisch aktiviert sind, musst du dir nun die Lightbox auf der Lightbox2-Webseite herunterladen.

Hast du den Ordner heruntergeladen, legst du dir einen js Ordner in deinem Theme an (falls nicht bereits vorhanden). Hier hinein packst du alle Dateien aus dem Lightbox2 js-Ordner (builder.js, effects.js, lightbox.js, prototype.js und scriptaculous.js).

Als nächstes legst du einen Ordner namens css an, und packst dort die Datei lightbox.css aus dem Lightbox2 ZIP-Ordner hinein.
Kopiere als nächstes die Bilder aus dem Ordner images in deinen eigenen images-Ordner. Du musst darauf achten, die Pfade für prevlabel.gif und nextlabel.gif in der lightbox.css Datei anzupassen. Auch die Pfade der Bilder loading.gif und closelabel.gif müssen eventuell von dir in der lightbox.js Datei angepasst werden.

Dann musst du die CSS und JS-Dateien noch im Header deines Themes aufrufen. Füge dazu folgenden Code innerhalb des head-Tags in deine header.php Datei ein.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Für das CSS-Stylesheet fügst du dann noch folgenden Code in die header.php Datei ein:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Hast du die Dateien in einen anderen Ordner deines Themes hochgeladen, musst du noch die entsprechenden Pfade anpassen.

Das war’s auch schon. Klickst du jetzt auf die Thumbnails deiner Bildergalerie, werden die Fotos mit dem Lightbox2 JavaScript-Effekt angezeigt.

Wie gefällt dir das NextGEN Gallery Plugin? Kennst du weitere praktische Tricks, die die Standard-Funktionen des beliebten Plugins erweitern? Ich freue mich wie immer auf dein Feedback!

Ähnliche Artikel zu diesem Thema

1. Jede Menge Tipps & Tricks, um die WordPress-Suche zu verbessern
2. Die 10 schönsten JavaScript-Plugins für dein Portfolio
3. JavaScript Dropdown-Menüs mit Superfish
4. Meine Top 10 JavaScript-Plugins
5. 10 Javascript Lightboxes im Vergleich

Und so funktioniert’s

Auf der Webseite des Superfish-Plugins kannst dir das Superfish ZIP-Paket herunterladen.

Das Superfish-Plugin gibt es nicht nur als klassisches Dropdown, sondern auch noch in etlichen Varianten.

Im ZIP-Download Paket sind Beispiel-Dateien der verschiedenen Plugin-Varianten bereits enthalten.

1. JavaScript-Code einfügen

Hast du dich für eine Variante entschieden, solltest du als erstes die JavaScript-Dateien superfish.js, hoverIntent.js (optional) und jquery-1.2.6.min.js auf deinen Server hochladen (am besten in einen eigenen Ordner mit dem Namen js).

Jetzt rufst du diese Dateien in deinem Dokument auf, indem du folgenden Code innerhalb des head-tags einfügst.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>

(Vergiss dabei nicht den Pfad anzupassen, falls du deine JavaScript-Dateien in einem anderen Ordner abgelegt hast.)

Um das Plugin in seiner Grund-Version zu aktivieren, fügst du jetzt direkt darunter folgenden Code ein.

<script type="text/javascript">
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>

2. CSS-Style Sheet einfügen

Im Download-Ordner findest du im Ordner CSS die superfish.css Datei. Lade diese ebenfalls auf deinen Server, und rufe sie mit folgendem Code im head-tag auf.

<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">

(Hier solltest du wieder auf den richtigen Verknüpfungs-Pfad achten. Ich habe die CSS-Datei in einen css-Ordner einsortiert.)

3. HTML-Code einfügen

Verwendest du jetzt folgenden HTML-Code in deinem Dokument, gekommst du die Grund-Version des Superfish-Dropdown-Menü angezeigt.

<ul class="sf-menu">
<li class="current">
<a href="#a">menu item</a>
<ul>
<li><a href="#aa">menu item that is quite long</a></li>
<li class="current">
<a href="#ab">menu item</a>
<ul>
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu item</a></li>
</ul>

4. Zusätzliche Optionen

Natürlich hast du jetzt noch jede Menge Optionen, um die Animation und die Optik deines Menüs anzupassen.

Die Möglichkeiten der Anpassung kannst du dir auf der Options-Seite des Plugins heraussuchen, und entsprechend in deinen JavaScript Code einfügen.

Wie gefällt dir das Superfish-Plugin? Kennst du weitere tolle JavaScript-Plugins für Dropdown-Menüs? Wenn ja, welches ist dein Favorit? Ich freue sehr über deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Die 10 schönsten JavaScript-Plugins für dein Portfolio
2. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
3. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
4. Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen
5. Webdesign Inspiration: Kreative Drop-Down Menüs

1. Coda Slider

Der Coda-Slider ist dem berühmten Slider von der Panic-Webseite nachempfunden. Der Slider bietet etliche Möglichkeiten der Anpassung z.B. automatische Animation oder Animation durch Klick, Anpassung der Geschwindigkeit und des Easings oder Crosslinking.

2. Accordion

Ein tolles Plugin um große Textmengen oder Sidebar-Menüs platzsparend zu präsentieren. Die Animation kann durch Klick oder Maus-Rollover ausgelöst werden.

3. Tabs

Ein viel verwendeter Javascript-Effekt auf Blogs. So kannst du deine neusten und beliebtesten Artikel, die letzten Kommentare oder deine Freebies attraktiv präsentieren. Eine Anleitung zur Verwendung des Plugins findest du hier.

4. jQuery Galleria

jQuery Galleria ist eine sehr schöne Möglichkeit deine Fotografien oder Portfolio-Arbeiten in einer Bildergalerie zu verpacken.

5. jQuery Validate

jQuery Validate ist ein »must have«-Plugin für alle modernen Formulare.

6. jQuery Quicksand

Eine wunderschöne Animation, um Inhalte z.B. deines Portfolios zu sortieren.

7. jQuery Lightbox Plugin

Ein praktisches Plugin, um den Lightbox-Klassiker auf deiner Webseite zu integrieren.

8. jCarousel

Ein Allround-Plugin für Silder-Animationen. Es gibt jede Menge Möglichkeiten das Plugin anzupassen.

9. Tooltips

Tooltips bieten eine tolle Möglichkeit zusätzliche Informationen oder Detailsbilder in einem Text oder einer Navigation zu integrieren.

10. jQuery Cycle Plugin

Zoom-Effekte, Fade oder Shuffle – mit dem jQuery Cycle Plugin hast du unzählige Möglichkeiten Bilder in einem Slider oder Banner zu animieren. Mehr über das Plugin kannst du in meinem Artikel »Jede Menge Javascript-Slider mit dem jQuery Cycle Plugin erstellen« nachlesen.

Welches sind deine Lieblings- Javascript-Plugins? Schreibe mir doch deine Tipps in einem Kommentar. Ich freue mich schon auf deine Nachricht!

Ähnliche Artikel zu diesem Thema

1. Die 10 schönsten JavaScript-Plugins für dein Portfolio
2. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
3. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
4. Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen
5. JavaScript Dropdown-Menüs mit Superfish

1. Lightbox 2

Die zweite Version der originalen Lightbox ist der Klassiker unter den Lightbox-Lösungen. Du kannst Bilder einzeln oder als Galerie integrieren. Das Design ist elegant, die Animation sehr angenehm.
Dateiformate: Bilder
Kostenlos, unter MIT License/GNU License

2. Fancybox

Zusätzliche Javascript-Plugins wie Mouse-Event und Easing erweitern die Funktionen der Fancybox. Das Design ist angenehm reduziert.
Dateiformate: Bilder, HTML-Elemente, Flash-Filme, iframe, Ajax
Kostenlos, unter MIT License/GNU License

3. Thickbox

Die Thickbox ist ein praktisches jQeury-Plugin. Das Design dieser Lightbox ist eher schlicht, kann aber noch per CSS optimiert werden. Bilder bleiben auch beim Scrollen im Browserfenster zentriert, und zu große Bilder werden automatisch an die Fenstergröße angepasst.
Dateiformate: Bilder, HTML-Elemente, Inline-Content, iframe, Ajax
Kostenlos, unter MIT License/GNU License

4. Highslide JS

Highslide JS ist eine schlichte Lightbox-Lösung mit Zoom-Effekt und etlichen Anpassungs- und Designoptionen.
Dateiformate: Bilder, HTML-Elemente
kostenlose private Lizenz, und kommerzielle Lizenzen erhältlich

5. Lightview

Lightview ist eine elegante Lightbox mit angenehmen Design und abgerundeten Ecken. Der Inhalt bleibt auch beim Scrollen im Browser zentriert, es gibt viele Möglichkeiten die Lightbox anzupassen.
Dateiformate: Bilder, Quicktime Movie, Ajax und Formulare, Anti-Aliasing, Iframe, Inline Content, Inline & Api, Flash
kostenlose private Lizenz, und kommerzielle Lizenzen erhältlich

6. Shadowbox

Das Design der Shadowbox ist schwarz, schlicht und eher eckig. Der Inhalt bleibt beim Scrollen im Browser zentriert. Die Animation ist angenehm.
Dateiformate: Bilder, Windows Media Player, Flash, Flash Video, HTML-Elemente, iframe
kostenlose private Lizenz, und kommerzielle Lizenzen erhältlich

7. Colorbox

Die Colorbox ist ein weiteres jQuery-Plugin und kann mit anderen Plugins kombiniert werden. Das Design ist schlicht und weiß, und du kannst es mit Hilfe von CSS leicht angepassen.
Dateiformate: Bilder, Ajax, Inline-Content, iframe
Kostenlos, unter MIT License

8. Phatfusion Multibox

Eine schöne dunkle Lightbox, HTML Beschreibungen der Bilder kannst du zusätzlich eingefügen. Die Lightbox scrollt im Browser mit.
Dateiformate: Bilder, flash, flv, mov, wmv, mp3, html, iframe
Kostenlos

9. Pirobox

Die Pirobox gibt es in 3 unterschiedlichen Designs (mit Schatten, weiß, oder schwarz). Beim Seiten-Scroll scrollt die Box mit.
Dateiformate: Bilder
Kostenlos

10. Pretty Photo

Eine schlichte Lightbox mit abgerundetem Design in schwarz oder weiß. Der Inhalt bleibt beim Scrollen zentriert.
Bilder, Flash, Vimeo, Quicktime, Youtube, iframe, Inline Content
Kostenlos, unter Creative Commons Attribution 2.5.

Wie gefallen dir diese Lightbox-Lösungen? Und kennst du noch weitere schöne Lightboxes, die hier unbedingt erwähnt werden sollten? Dann schreibe doch einfach einen Kommentar, ich freue mich auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Die 10 schönsten JavaScript-Plugins für dein Portfolio
2. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
3. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
4. Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen
5. JavaScript Dropdown-Menüs mit Superfish

Schau dir hier eine Demo des Sliders an!

1. Plugin herunterladen

Als erstes lädst du dir das Plugin von der Plugin-Webseite herunter. Hier siehst du schon etliche Demo-Funktionen des Plugins, z.B. Zoom, Shuffle, Fade und viele mehr.

Hast du das Plugin heruntergeladen, findest du im Ordner »jqerycyle« eine example.html Datei. Hier findest du den benötigten Code für das Plugin.

2. Javascript-Code einfügen

Als erstes fügst du den benötigten Javascript-Code im Header innerhalb deines Head-Tags oder im Footer vor den html-Tag ein.

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/
cycle/jquery.cycle.all.2.74.js"></script>
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow')
	.after('<div id="nav">')
	.cycle({
		fx: 'turnDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    pager:  '#nav'
	});
});
</script>

Mit diesem Code brauchst du du jQuery garnicht nicht mehr auf deinen eigenen Server hochzuladen.

3. Fotos bearbeiten

Deine Fotos für den Slider schneidest du jetzt in der gewünschten Größe in Photoshop o.ä. zu, und speicherst sie durchnummeriert am besten in einem Ordner namens »images« ab.

4. HTML-Code einfügen

Als weiteren Code-Schnipsel fügst du die Fotos (img-Tags) in einen div-Tag mit dem class-Attribut »slideshow«. Kopiere dazu folgenden Code und fügst ihn innerhalb des body-Tags auf deiner Seite ein. Achte darauf, dass du deine individuelle Breite (width) und Höhe (height) anpasst, und das richtige Zielverzeichnis für deine Image-Links wählst (bei meinem Beispiel: images/01.jpg).

<div class="slideshow">
	<img src="images/01.jpg" width="500" height="375" />
    <img src="images/02.jpg" width="500" height="375" />
    <img src="images/03.jpg" width="500" height="375" />
    <img src="images/04.jpg" width="500" height="375" />
    </div><!--end slideshow-->

Du kannst so viele Bilder einfügen, wie du magst.

5. CSS-Code einfügen

Jetzt musst du nur noch die CSS-Styles für deinen Slider anpassen. Dazu nimmst du die Styles aus der example.html, fügst sie in deine css-Datei (z.B. stlye.css) ein, und passt alle Farben, Größen und Schriften an. Im meinem Bespiel sieht der CSS-Code so aus. Gerne kannst du auch diesen kopieren, und dann deine individuellen Anpassungen starten.

.slideshow {
	width: 540px;
	height: 395px;
	margin: 30px auto;
}
.slideshow img {
	padding: 20px;
	background: #8CC1EC;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#nav {
	margin: 5px auto;
	width: 540px;
	height: 30px;
}
#nav a {
	background: #8CC1EC;
	padding: 5px 8px 5px 8px;
	color:#fff;
	display:block;
	float:left;
	text-decoration: none;
	margin: 0 3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#nav a.activeSlide {
	background: #000033;
}
#nav a:focus {
	outline: none;
}

Fertig ist dein animierter Slider! Natürlich gibt es jede Menge Optionen für die Animation deiner Bilder. Ich habe z.B. einen sogenannten Pager (also eine zusätzliche Navigation) eingefügt, und die »turnDown«-Animation gewählt.

Eine Auflistung mit Demo-Codes aller Slider-Varianten findest du auf der Plugin-Webseite unter dem Punkt »See More Demos and Examples«. Deine Anpassungen nimmst du dann in deinem Javascript-Code (siehe Punkt 2) vor.

Hast du noch Fragen zum jQuery Cycle Plugin, oder kennst du weitere hilfreiche Javascript-Plugins mit denen man schnell Slider bauen kann? Schreibe mir doch einen Kommentar, ich freue mich über dein Feeback!

Ähnliche Artikel zu diesem Thema

1. Jede Menge Tipps und Plugins, um die Artikelseiten in WordPress zu optimieren
2. Jede Menge Tipps & Tricks, um die WordPress-Suche zu verbessern
3. Die 10 schönsten JavaScript-Plugins für dein Portfolio
4. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
5. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt

Eine Demo des Widgets mit allen Optionen und einer Dokumentation findest du hier.

Um das Widget in deine Webseite einzubauen, gehst du einfach auf diese Download-Webseite von jQuery UI.

1. Download das Widget-Set

Hier kannst du dir ein individuelles Set an Widgets und Funktionen der jQuery UI Library für dein Projekt zusammenstellen (unter dem Punkt Widgets findest du die gewünschte Tab-Funktion).

Wenn du möchtest kannst du dir jetzt noch rechts in der Sidebar ein Theme aussuchen. Weiter geht’s zum Download des Pakets.

2. Einbinden in deine Webseite

Als nächsten Schritt lädst du den js-Ordner mit den beiden Dateien jquery-1.3.2.min.js und jquery-ui-1.7.2.custom.min.js auf deinen Server hoch, und verlinkst in im head-Tag mit folgendem Code auf diese beiden Dateien:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

Willst du die Dateien nicht extra auf deinen Server laden, kannst du alternativ auf die Google Ajax Libraries linken. Dazu musst du lediglich folgenden Code in den head-Tag einsetzen.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js "></script>

Willst du das Style-Theme von jQuery UI verwenden, musst du außerdem die CSS-Datei jquery-ui-1.7.2.custom.css aus dem css-Ordner auf deinen Server laden, und diese ebenfalls im head-Tag verlinken.

<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />

Jetzt kannst du deine Tabs einsetzen. Für ein einfaches Tab-Menü kannst du folgenden Demo-Code verwenden.

<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
	});
	</script>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>

<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>

<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
</div>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>Click tabs to swap between content that is broken into logical sections.</p>

</div><!-- End demo-description -->

Jede Menge weitere Optionen, um das Tab-Menü anzupassen, findest du auf der Tab-Demo Seite von jQuery UI. Zum Beispiel können sich die Tab-Inhalte bereits bei Mausover, nicht erst bei Klick ändern etc.

Schau dir einfach mal die verschiedenen Funktionen des Widgets an, um einen Einblick in die vielseitigen Möglichkeiten zu bekommen.

Eine ausführliche Erklärung zur jQuery UI Library und den Widgets, findest du unter »Getting Started with jQuery UI«.

Schöne Tab-Menüs als Inspiration

Falls du noch nicht ganz sicher bist, wie du deine Tabs stylen möchtest, und welche Inhalte sich für das Tab-Menü eignen, hier ein paar inspirierende Beispiele.

n.design Studio

Komodo Media

Freelance Folder

Delibar

CSS Tricks

Kennst du weitere Webseiten besonders schönen Tab-Menüs, oder kennst du ein anders Javascript-Widget für die Tab-Funktion empfehlen? Dann schreibe mir doch einfach einen Kommentar, ich freue mich schon auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln
2. Die 10 schönsten JavaScript-Plugins für dein Portfolio
3. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
4. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
5. Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen

Uns so einfach geht’s

Um deinen Banner zu animieren, erstellst du als erstes beliebig viele Sliderbilder. Dann suchst du dir auf der Webseite des Plugins die passende Animationsvariante aus. Für meinen Banner habe ich »A list with images and links« verwendet. Lade dir die Quelldatei des Plugins herunter, und öffne die index.html Datei.

Für einen animierten Bilderbanner kopierst du dir folgenden Codeschnipsel aus der Datei:

<h3>A list with images and links</h3>
<ul>
  <li><a href="#"><img src="images/1.jpg" alt="image" /></a></li>
  <li><a href="#"><img src="images/2.jpg" alt="image" /></a></li>
</ul>

Setzte jetzt deine eigenen Bilder und Links in die unorderd List (ul) ein.

Jetzt solltest du noch die jQuery-Library, die Javascript-Datei jquery.innerfade.js und die InnerFade-Funktion aufrufen. Kopiere dazu folgenden Codeschnipsel in den Headbereich deiner Datei:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript"> $(document).ready( function(){ $('ul').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', containerheight: '125px' });	});
</script>

Das war’s auch schon. Dein animierter Banner ist fertig! Du kannst in jetzt noch mit CSS stylen, und dann in den verschiedenen Browsern testen.

Wenn du genauer erfahren möchtest, wie ein solcher Slider mit Javascript programmiert wird, ist das Video-Screencast: »How to build a Simple Content Slider jQuery Plugin« von Nettuts wirklich sehr hilfreich.

Kennst du weitere praktische Javascript-Plugins, die du unbedingt empfehlen möchtest? Dann schreibe mir doch einen Kommentar, ich freue mich auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Die 10 schönsten JavaScript-Plugins für dein Portfolio
2. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
3. Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen
4. JavaScript Dropdown-Menüs mit Superfish
5. Meine Top 10 JavaScript-Plugins

1. Easy Slider

Den Easy Slider gibt es in verschiedenen Varianten. Entweder als automatisch animiert, oder mit numerische Navigation. Außerdem gibt es auch eine Vorlage, falls du mehrere Slider auf einer Seite unterbringen willst. Der Code ist leicht verständlich und einfach zu verändern. Bei meinem Projekt, habe ich mich für den Easy Slider entschieden. Hier findest du die Beschreibung, eine Demo und den Code zum downloaden.

2. Coda Slider

Der Coda Slider ist wohl einer der beliebtesten Javascript Slider. Berühmtes Beispiel und Namensgeber ist der Slider-Effekt auf der Coda-Webseite von Panic. Ein tolles Tutorial zum Coda Slider mit Demo findest du auch bei jQuery for Designers.

3. jCarousel

Eine weitere Option ist der jCarousel-Slider. Jcarousel bietet verschiedenste Möglichkeiten, wie automatisches Scrollen, vertikaler Slides oder das Laden von dynamischen Inhalten.

4. YUI Carousel Component

Eine weitere Slider-Option, die mit der YUI Library von Yahoo funktioniert, ist der YUI Carousel Slider. Die Varianten sind ähnlich flexibel, wie bei jCarousel.

5. Slider Gallery

Ein klasse Tutorial von jQuery for Designers, wie du den Slider-Effekt der Apple Webseite hinbekommen kannst. Mit einer genauen Beschreibung, Screencast, Demo und Code kann eigentlich nichts mehr schief gehen.

Slider im Einsatz

Zur Inspiration, hier noch ein paar sehr schöne Beispiele, wie die Javascript-Slider auf Webseiten eingesetzt werden können:

Radiumlabs hat einen großen Intro-Slider. Auf der Webseite des Designers von Radiumlabs branded07 siehst du ebenfalls einen sehr schönen Slider. Eine schönen Foto-Slider hat z.B die Webseite Tennessee Summer. Und einen Slider mit zusätzlicher Navi gibt’s auf der Webseite Newsberry.

Kennst du weitere tolle Javascript-Slider oder Webseiten mit tollen Slider-Effekten? Dann schreib doch einfach einen Kommentar, ich freue mich auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Die 10 schönsten JavaScript-Plugins für dein Portfolio
2. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
3. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
4. JavaScript Dropdown-Menüs mit Superfish
5. Meine Top 10 JavaScript-Plugins

Eine Demo eines solchen Smooth-Scrolls kannst du dir auf der Webseite CSS-Tricks ansehen.

Und so integrierst du den Smooth-Scroll Effekt auf deiner eigenen Webseite:

1. Setzte deine Ankerpunkte, z.B. ganz oben auf deiner Seite:

<a name="top" id="top"></a>

2. JQeury downloaden

Auf der JQuery-Webseite findest du die neusten Versionen der JQeury-Library zum runterladen. Downloade JQuery, und lade es in einem Ordner auf deinem Server hoch. Rufe dann die QJuery-Library im head-Tag deiner Webseite auf. Alternativ kannst du auch direkt auf die JQuery-Library auf dem Google-Server linken:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

3. Javascript Code einfügen

Speicher folgenden Code in eine Javascript-Datei mit dem Namen »smoothscroll«, und lade diese ebenfalls in deinen js-Ordner:

$(function(){
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

4. Code im head-Tag aufrufen

Um den SmoothScroll-Code auf deiner Webseite aufzurufen, fügst du jetzt noch folgenden Code in den Head-Tag ein:

<script type="text/javascript" src="js/smoothscroll.js"></script>

Und das war’s auch schon! Linkst du jetzt von einem Punkt deiner Webseite auf den Ankerpunkt #top, scrollt deine Seite elegant nach oben.

Ich finde den Smooth-Scroll eine sehr elegante und benutzerfreundliche Methode, um auf einer Webseite zu navigieren. Die SmoothScroll-Methode ist z.B. auch bei Single-Page-Webseiten besonders gefragt. Hier ein besonders schönes Beispiel!

Kennst du weitere schöne Webseiten mit tollen Scroll-Effkten? Welche Javascript-Effekte gefallen dir besonders? Schreib mir doch einen Kommentar, ich freue mich schon auf dein Feeback!

Ähnliche Artikel zu diesem Thema

1. Die 10 schönsten JavaScript-Plugins für dein Portfolio
2. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
3. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
4. Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen
5. JavaScript Dropdown-Menüs mit Superfish

1. Schatteneffekt mit Javascript

Javascript ist Browser-kompatibel, vorausgesetzt Javascript ist nicht deaktiviert. Außerdem ist die Methode sehr leicht zu verwenden.

Lade dir einfach das Jquery-Plugin dropShadow und die neuste Version des Jquery-Library Scripts herunter, und füge den folgenden Code ein.

<script type="text/javascript" src="http://DEINEDOMAIN.de/js/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.dropShadow.js"></script> <script type="text/javascript"> $(function(){ $('.box').dropShadow({ left: 7, top: 7, opacity: 1.0, color: 'black' }); }); </script> <div class="box"> <!--deinen Inhalt hier --> </div>

2. Schatteneffekt mit CSS3

Eine super einfache Methode, um einen Schatteneffekt zu erzeugen bietet CSS3. Leider wird diese Methode im Augenblick nur von den aktuellen Versionen gängiger Browser wie Firefox, Google Chrome, und Safari unterstützt. Eine Ausnahme ist leider, wie könnte es anders sein, der geliebte Internet Explorer ;-).

Der CSS-Code, um einen Schattenwurf um ein Rechteck anzuzeigen, sieht dann im CSS Style Sheet so aus:

<style type="text/css">
.box { box-shadow: 7px 7px 5px black; -moz-box-shadow: 7px 7px 5px black; -webkit-box-shadow: 5px 5px 3px black; }
</style>
<div class="box">
  <!--deinen Inhalt hier-->
</div>

Einen tollen Artikel, der etliche neue Methoden von CSS3 vorstellt, findest du hier bei Nettuts.

Was denkst du über die Verwendung von Schatteneffekten? Kennst du tolle Webseiten, die Schatten einsetzen, oder verwendest du selbst Schatteneffekte auf deiner Webseite?

Schreib doch einfach unten einen Kommentar, ich freue mich auf dein Feedback!

Ähnliche Artikel zu diesem Thema

1. Mach dich fit für CSS3 mit diesen praktischen CSS3 Online-Tools
2. Die 10 schönsten JavaScript-Plugins für dein Portfolio
3. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
4. Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen
5. JavaScript Dropdown-Menüs mit Superfish

1. neue Möglichkeiten mit CSS3

Die neuen Möglichkeiten von CSS3 werden derzeit unter Webdesignern heiß diskutiert. Die Möglichkeit von abgerundeten Ecken ganz allein mit CSS Styles gehört u.a. zu den neuen Features.

Die Methode ist simpel. Füge deinem div einfach die folgenden CSS Styles hinzu:

.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Diese Methode ist fantastisch simpel und der Code sauber, doch wie könnte es anders sein, hat sie natürlich einen Haken. Leider wird diese Methode nicht von Internet Explorer und älteren Versionen anderer Browser unterstützt.

Wenn die abgerundeten Ecken für dein Design nicht unbedingt notwendig sind, und du mit der Option, ist diese neue Methode aber sicherlich eine tolle Option.

Noch mehr Infos über die neuen Möglichkeiten und Highlight von CSS3 kannst du auch in dem Artikel »11 Classic CSS Techniques Made Simple with CSS3« bei Nettuts nachlesen. Die neusten Infos und Diskussionen rund um das Thema CSS3, findest du außerdem auf der Webseite www.css3.info.

2. abgerundete Ecken mit Javascript

Eine weitere einfach, und vor allem Browser-kompatible Methode, um abgerundete Ecken zu erzeugen, ist die Möglichkeit das Javascript zu verwenden.
Downloade dir dazu einfach die aktuelle Version von Jquery und das Javascript-Plugin Corners, und rufe beides im Head-Bereich deines Codes auf.

Füge dann noch für die entsprechende div-class diese Funktion ein:

<script type="text/javascript"> $(function(){ $('.box').corners('10px'); }); </script>

Diese Methode funktioniert natürlich nur, wenn der Betrachter Javascript zugelassen hat. Ansonsten werden, wie auch bei der CSS3 Methode, normale Ecken angezeigt.

3. abgerundete Ecken mit CSS und Images

Falls du ganz sicher gehen möchtest, dass deine abgerundeten Ecken in allen Browsern (auch älteren Version von IE) angezeigt werden, ist diese Methode wohl derzeit die einzige Option.

Zuerst erstellt du vier Images deiner abgerundeten Ecken mit Photoshop oder Fireworks als Vorlage. Diese Vorlagenbilder setzt du dann als Background-Image in deine CSS Styles ein.

Der Vorteil, dieser Methode ist, dass du die vorbereiteten Ecken auf verschiedene Flächen mit unterschiedlicher width und height (also Länge und Breite) anwenden kannst.

Bist du sicher, dass du die Ecken nur in einer Größe benötigst, kannst du auch nur zwei Vorlagenbilder (eines für die oberen zwei Ecken, eines für die unteren zwei) erstellen.
Eine ausführliche Beschreibung dieser Methode kannst du dir auch in dem Screencast-Video bei CSS-Tricks anschauen. Chris Colyier erklärt hier alle Methoden, um abgerundete Ecken zu erstellen, noch einmal ganz ausführlich.

Welche Methode verwendest du am liebsten, um abgerundete Ecken in deinem Webdesign darzustellen? Hast du weitere interessante Tipps zum Thema abgerundete Ecken? Dann schreib mit doch einen Kommentar, ich freue mich schon auf dein Feedback.

Ähnliche Artikel zu diesem Thema

1. Mach dich fit für CSS3 mit diesen praktischen CSS3 Online-Tools
2. Die 10 schönsten JavaScript-Plugins für dein Portfolio
3. JavaScript Dropdown-Menüs mit Superfish
4. Transparente Farben mit der CSS3-Funktion RGBA
5. Meine Top 10 JavaScript-Plugins