MES veröffentlicht seine AJAX Slideflow Control, die im Rahmen unserer neuen Videokonsole entwickelt wurde, unter Creative Commons (CC-by 3.0). In unserer Demo kommt sie für eine Fotogalerie zum Einsatz.

Live-Demo:

Der Foliensatz kann mit der Maus gedraggt werden. Per Click kann an eine gewünschte Stelle gesprungen werden. Die Navigation per Mausrad und Pfeiltasten ist nach einem Click auf das Demofenster möglich – oder probieren Sie die Demo einfach im Vollbildmodus aus.

Technischer Hintergrund: Fotodaten werden aus einer XML-Datei ausgelesen; Thumbnails werden per Photoshop-Aktion vorgeneriert (im Download enthalten).
03/28/2008: Update auf Slideflow 1.1 – Der Bildzuschnitt und die Richtung des Farbverlaufs wurden korrigiert!

Slideflow 1.1 mit Gallerie-Demo herunterladen

Wir sind darauf gespannt, wo Slideflow zum Einsaz kommt – wenn Ihnen Slideflow gefallen hat, hinterlassen Sie uns einen Kommentar!

Credits:

• Basierend auf Code von Michael L Perry
• Photoshop-Aktionen ursprünglich von Marcus Strehlow
• Fotos von Nicholas_T
• Tigra Slider control
• Scriptaculous and Prototype

Slideflow in ihren Skripts einsetzen

Die Gallerie-Demo ist ein guter Startpunkt. In slideflow.js haben wir alle wichtigen Aspekte des Codes dokumentiert. Die wichtigsten Parameter, wie z.B. die Pfade zu den Bilddaten und das DOM-Objekt, unter dem Slideflow erstellt werden soll, werden bei Initialisierung übergeben. Das Steuerelement bietet auch Methoden, um die Anzeige zur Laufzeit zu verändern, sowie Callbacks, die es der Anwendung ermöglichen, auf Slideflow-Bewegungen und Clicks auf die Mittelfolie zu reagieren. Bitte beachten Sie, dass das Steuerelement spezifisches CSS benötigt (slideflow.css).

Anwendung der Photoshop-Aktionen

Die Bilder müssen durch Photoshop-Aktionen aufbereitet werden (ursprünglich von Marcus Strehlow), um die Miniaturbilder mit linker, rechter und zentrierter Ausrichtung zu erstellen. Diese Bilder müssen jeweils in separate Verzeichnisse gespeichert werden, die dem Steuerelement dann als pathLeft, pathRight und pathCenter übergeben werden.
We opted for Photoshop’s Save for Web feature instead of the regular JPEG export because it delivers far superior quality. Unfortunately, Save for Web doesn’t work well with batches and requires one to manually update the export directories for each of the three Slideflow actions. This can be done by performing the following steps:

1. Create a blank RGB document, or open any RGB image
2. Navigate to the action’s Export command, which is second to last and double-click it
3. The Save for Web dialog opens. Save the blank document in your target folder for the respective action (i.e. left for the left action etc.)
4. If you’re like Tim and like a clean system, you may delete the JPEG you just created

All actions assume 4 : 3 ratio. If pictures have a different ratio, you need to adjust it first, or the thumbnail images will have white edges.

Schlagworte: AJAX, cover flow, coverflow, gallery, javascript, slideflow

Dieser Beitrag wurde am Donnerstag, 15. November 2007 um 13:31 Uhr veröffentlicht und unter Uncategorized gespeichert. Sie können Kommentare zu diesem Eintrag über den RSS-2.0-Feed verfolgen.Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.