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.
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.
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.
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.
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>
jQuery posterGallery ist mit verschiedenen Optionen ausgestattet mit denen Ihr das Plugin Euren Bedürfnissen anpassen könnt.
Alle Dateien die Ihr – neben jQuery – braucht um posterGallery zu starten, befinden sich in dieser Zip-Datei.
Projektupdates findet Ihr auf der offiziellen Projektseite (in Englisch). Wenn euch der Slider gefällt sagt’s weiter.
Sie interessieren sich für eine Webseite, benötigen einen erfahrenen Enwtickler für Ihr Projekt oder haben allgemeine Fragen zu meinen Dienstleistungen?
Schreibe einen Kommentar