cSlider - 2D Coverflow

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

Write a new comment