Moderne Webseiten

posterGallery jQuery Slider

posterGallery ist ein jQuery Slider der Bilder in einer horizontalen Reihe anordnet und beim Überfahren der ‚Trigger‘ eine konstante Animation von links nach rechts (oder Umgekehrt) ausführt.

Merkmale von jQuery posterGallery

posterGallery simuliert eine gleichmässige Bewegung – den Effekt wenn man das Auge von einer Seite zur anderen schweifen lässt. Mit diesem Slider könnt Ihr zum Beispiel Euer Kunstportfolio vorstellen, Eure Designideen präsentieren oder Eure Werbebilder publik machen.

Einheitliche Animationsgeschwindigkeit

jQuery posterGallery lässt sich von jeder Position starten – die Animationsgeschwindikeit bleibt konstant. Dazu kalkuliert posterGallery die Animationszeit in Abhängigkeit der Bühnenbreite, der zurückgelegten Distanz und der Anfangsgeschwindikeit.

Automatische Bildskalierung

Abhängig vom Format – Portrait oder Landschaft – kalkuliert posterGallery den Maximalwert (80% der Galleriehöhe) und odnet ihn der längeren Kante des Bildes zu.

So startet Ihr posterGallery

Zuerst platziert Ihr eine ul (unordered list) mit Bildern in einem Container welchem Ihr eine id gebt. Ich habe eine section element mit der id=“#poster-gallery“ verwendet.

Dann platziert Ihr postergallery.css, postergallery.js und den folgenden code im head Bereich.

<script type="text/javascript">				
$(window).load(function() {
$('#poster-gallery').posterGallery({transitionSpeed: 2, galleryHeight: 300, galleryWidth: 800, galleryBackground: '#cecece', outerShadow: '0 0 3px 0 #999'});
});
</script>

Optionen

jQuery posterGallery ist mit verschiedenen Optionen ausgestattet mit denen Ihr das Plugin Euren Bedürfnissen anpassen könnt.

Download

Alle Dateien die Ihr – neben jQuery – braucht um posterGallery zu starten, befinden sich in dieser Zip-Datei.

Spread the word

Projektupdates findet Ihr auf der offiziellen Projektseite (in Englisch). Wenn euch der Slider gefällt sagt’s weiter.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Aktuelle Beiträge

Kontakt

Sie interessieren sich für eine Webseite, benötigen einen erfahrenen Enwtickler für Ihr Projekt oder haben allgemeine Fragen zu meinen Dienstleistungen?

HTML Mania – Moderne Webseiten
Impressum


® Made with WordPress