cSlider - 2D Coverflow

Wenn Du die Apple Homepage magst, dann gefallen Dir sicher auch die Produktslider - z.B. auf der iPod-Seite.

Ähnlich wie der Coverflow Effect ermöglicht dieser Slider eine einfache und intuitive Navigation.

cSlider ist meine Prototype/script.aculo.us Umsetzung dieser Idee. (Aus Äpfel kann man Wein machen: Cider. Daher das c)

Features

Beispiele

c-slider-basic.html

Eins

Vier

Ende

c-slider-blue.html

c-slider-tango.html

Verwendung

Lade den Ordner src hoch, binde die Stylesheets und Javascripte ein und füge das Markup in die Seite ein.

CSS

Um Anpassungen möglichst einfach zu machen, habe ich die Stylesheets auf zwei Dateien geteilt: c-slider-basics.css enthält alle grundlegenden Angaben und in c-slider-customize.css kannst Du Änderungen vornehmen, um cSlider an Deine Seite anzupassen.

Zunächst bindest Du also ein:

<link href="/pfad/src/css/c-slider-basics.css" type="text/css" rel="stylesheet"> </link>

Wie in dem Basis Beispiel erzeugt der Basis Stylesheet einen cSlider, der 500 Pixel breit und 140 Pixel hoch ist. Die Bilder in der Basis Version sollten 70*70 Pixel groß sein.

Wenn Du eine andere Größe und/oder ein anderes Aussehen haben möchtest, dann binde einfach zusätzlich c-slider-customize.css ein.

<link href="/pfad/src/css/c-slider-customize.css" type="text/css" rel="stylesheet"> </link>

Selbstverständlich könntest Du die Anpassungen auch direkt imm Basis Stylesheet vornehmen, aber ich hoffe so ist einfacher:

c-slider-customize.css enthält nur die Eigenschaften, die für eine Anpassung von Größe und Aussehen relevant sind und die Datei ist relativ ausführlich kommentiert. Wohin gegen der Basis Stylesheet alles andere als selbsterklärend sein dürfte; das liegt u.a. an den CSS Sprites und den implizieten Höhen- und Breitenangaben.

HTML

Der cSlider besteht aus einem Container einigen wenigen div s, die das Layout vorgeben.Die eigentlichen Menupunkten komment in <div class='innerMenu'> .

Die einzelen Elemente in der Box sind Punkte einer ungeordneten Liste und die Kategorien, die in Scrollbar angezeigt werden, sind Überschriften dritter Ordnung.

<div class='cSlider'>
<div class='top'>
<div class='left'></div>
<div class='right'></div>
</div>
<div class='bottom'>
<div class='left'></div>
<div class='right'></div>
</div>
<div class='outerMenu'>
<div class='innerMenu'>
<h3>Kategorie</h3>
<ul>
<li><a href='#'>Text</a></li>
<li><a href='#'>Text</a></li>
[weitere Listenpunkte]
</ul>
<h3>Kategorie</h3>
<ul>
<li><a href='#'>Text</a></li>
<li><a href='#'>Text</a></li>
[weitere Listenpunkte]
</ul>
[weitere Kategorien und Listen]
</div>
</div>
</div>

Javascript

Als letztes fehlt jetzt noch das Javascript, das kommt am besten so nah wie möglich an das </body> Tag:

<script src="/pfad/src/js/lib/prototype.js" type="text/javascript" ></script>
<script src="/pfad/src/js/lib/effects.js" type="text/javascript" ></script>
<script src="/pfad/src/js/lib/slider.js" type="text/javascript" ></script>
<script src="/pfad/src/js/c-slider.js" type="text/javascript" ></script>

Sobald das XHML fertig geladen ist, wird für alle Elemente mit class='cSlider' das Script ausgeführt.

Anpassung

Die Hintergrundgrafiken des cSlider werden per CSS Sprites einbebunden; wenn Dir die komplette Hintergrundgrafik etwas zu verwirrend vorkommen, dann hilft Dir vielleicht die Animation links.

Im Ordner ./src/img/ findest Du die Datei c-clider.psd . Wenn Du die in Photoshop öffnest, dann siehst Du links eine etwas verwirrende Chaos und rechts eine Slider Box. Die Chaosseite sieht so aus, wie sie aussieht, weil ich alle benötigten Hintergrundgrafiken in eine einzige Grafik gepackt habe, um die Anzahl der HTTP Requests möglichst gering zu halten.

Du wirst feststellen, dass die Photoshop Datei zwei Gruppen mit gleichnamigen Ebenen enthält. Spiel einfach mit den Ebenenstilen und Farben der oberen Gruppe herrum, bis Dir das Ergebnis gefällt und kopiere die Änderungen auf die entsprechennde Ebene in der anderen Gruppe.

Dann verkleinere die Arbeitsfläche so auf 65 px Breite, dass nur noch die linke Seite sichtbar ist. Für Web Speichern als PNG24 und fertig.

Feedback

Ich freue mich über Feedback! Gerne als Kommentar unter http://samisdat.org/cSlider.

Lizenz

cSlider ist unter Creative Commons BY-SA lizensiert. Das erlaubt Dir die Verwendung, Veränderungen und Weiterverteilung, solange erkennbar bleibt, dass ich der ursprüngliche Autor bin und Du anderen dieselben Rechte einräumst, wie ich Dir.

In der .zip sind außer meinem Script, Stylesheets und Grafiken noch einige weitere Dateien enthalten: