As i saw the coverflow effect in iTunes for the first time, i thought: That’s the way software should always be: Simple, intuitive and just a pleasure to look ar.
Unfortunately this effect can not be done with Javascript, but the developers of Apples website created a similar interface: The productbrowser, just have a look at Apples iTunes page.
For an upcoming relaunch of Jusos Wuppertal I want to implement such an interface and so I rebuild it with Prototype and scriptaculous:
I zipped it al together and you can get it for free licensed as CC-BY-SA: c-slider.zip
Besides the script and the images c-clider.zip contains some examples and a short doc, which you acess online, too: docs/en.
Probably you will notice that Apple’s homepage is also driven by Prototype and scriptaculous, but if you have a look at the source, you will see that my script and the orginal have not much in common.h2. Features
- Standard (X)HTML und CSS
- Javascript comes on top, it can be used without
- Multiple cSliders on same page are possible
- Using css sprites an empty cSlider contains only a single background-image
- Automatic rendering of the navigation shortcuts in scrollbar
- Flexible width and height
- Customizing by CSS
- Themeable with included Photoshop file
BTW: The c came into cSlider, while you can made wine from apples: Cider
Comments
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 ;)