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 Animations­geschwindigkeit

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.

• transitionSpeed: Der Zeitwert (sek), den es braucht die Bühne von links nach rechts (oder umgekehrt) zu bewegen
• galleryHeight: Die Höhe der Gallerie. Die Größe und der Platz zwischen den Bildern wird abhängig von diesem Wert berechnet
• galleryWidth: Die Breite der Gallerie
• galleryBackground: Die Hintergrundfarbe der Gallerie. Wird als String (zum Beispiel ‚#333333‘) geschrieben
• outerShadow: Die Form und Farbe des Gallerie-Schattens. Wird als String (zum Beispiel ‚0 0 3px 0 #999‘) geschrieben

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.