Als ich das erste Mail den Coverflow Effekt in iTunes gesehen habe, habe ich gedacht: So sollte Software eigentlich immer funktionieren: Einfach, intuitiv und schön anzusehen.
Leider läßt sich der Effekt in Javascript nicht ohne weiteres nachbauen, aber die Entwickler der Apple Homepage haben ein ähnlichen Interface gebaut: Den Productbrowser, zu bewundert u.a. auf der Apple iTunes Seite.
Weil ich für den anstehenden Relaunch der Jusos Wuppertal Seite genau so was brauche, habe ich den Produktbrowser habe ich mal mit Prototype und scriptacous nachgebaut:
Weil mir das Ergebnis schon ganz gut gefällt, habe ich den cSlider mal zusammengepackt und Du kannst ihn Dir runterladen: c-slider.zip enthält alle notwendigen Scripte, Grafiken, einige Beispiel und auch eine kurze Anleitung.
Die Anleitung mit den Beispielen findest Du auch online:
docs/de
Weil dies die erste Version ist, bin ich sehr gespannt, wie und ob es bei Dir funktioniert!
Auf der Apple Homepage läuft überigens auch Prototye und scriptalaus, aber wenn Du einen Blick in den Sourcecode dort wirfst, dann wirst Du feststellen, dass mein Script ungefähr null mit dem Orginalscript zu tun hat.
Features
- Standardkonformes (X)HTML und CSS
- Javascript kommt oben drauf, d.h. es bleibt auch ohne bedienbar
- Mehere unterschiedliche cSlider auf einer Seite möglich
- Durch CSS-Sprite besteht der cSlider (ohne Inhalt) nur aus einem einzigen Bild
- Automatische Erzeugung der Navigation in der Scrollbar
- Flexibel in Höhe und Breite
- Anpassungen per CSS
- Themeable mit beiliegender Photoshop Datei
BTW: Das c in cSlider kommt von Cider, weil man aus Äpfeln auch Wein machen kann. Mal sehen, vielleicht wird hier in Zukunft noch mehr cScript zum Downloaden geben: cDock wäre der nächste Kandidat. Meinen ersten Fisheye Versuch hatte ich ja schon online gestellt und wie Du unten siehst, habe ich mittlerweile auch eine Version mit Spiegel Effekt zum Laufen bekommen.
Kommentare
Nice work..
Hi Bastian!
Klein, Quadratisch, praktisch, gut ;-)
Toll, wirklich toll! Ich von deinem Cider-Slider begeistert. Arbeite an der Seite einer Bekanntern und da brauche ich sowas . Nicht alle Features, aber doch fast.
Da ich aber keine quadratischen Bilder habe (Sind Theater-, Portrait und Filmfotos), muss ich nur noch rausbekommen wie ich sie schön centern kann. Hast du vielleicht einen Tipp für mich?
Weiter so und beste Grüße aus Wien,
Stefan
Great job! can I customize the slider – to LARGER images – as in larger than gray.png file? i’d like to make it even more bulkier ;)