cSlider - 2D Coverflow

If you like Apple's Homepage you may enjoy the productslider as well - have a look at the iPod page.

Like the coverflow effect theses sliders are simple and intuitive way to navigate.

cSlider is my Prototype/script.aculo.us implementation of this koncept. (You can make wine our of apples: Cider. That's the c in cSlider)

Features

Examples

./c-slider-basic.html

One

Fout

End

./c-slider-blue.html

./c-slider-tango.html

Usage

Upload dir src , embed stylesheets and javascripte and add markup to your site.

CSS

In order to make adjustments as simple as possible, i splitted the styles into two different files: c-slider-basics.css contains all basic properties and you can customize cSlider editing c-slider-customize.css .

First of all you have to add:

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

As you can see in the basis example, the basic style determinetes a cSlider wich is 500 Pixel width and 140 Pixel heighz. Images in basic version are squared 70 Pixel.

If you need another dimensions and/or a different look, just embed in addition: c-slider-customize.css

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

Of course you could edit the basic stylesheet, but i think it might be easier this way:

c-slider-customize.css contains only properties which are relevant to change the dimensions or the look and this file is commented fairly detailed. The basic stylesheet itselfe is every thing else the self explaining while using css sprites and implizied width and height.

HTML

<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>Categorie</h3>
<ul>
<li><a href='#'>Text</a></li>
<li><a href='#'>Text</a></li>
[mor listpoints]
</ul>
<h3>Categorie</h3>
<ul>
<li><a href='#'>Text</a></li>
<li><a href='#'>Text</a></li>
[more listpoints]
</ul>
[more categories and lists]
</div>
</div>
</div>

Javascript

Last but not least you have to add the Javascripts; place them as close to </body> tag as possible:

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

As soon as the HTML is loaded for each element with class='cSlider' the script will called.

Customizing

All background-images are added using css sprites; maybe the animation on the left can help to understand how the combinded background is constructed.

Within ./src/img/ you find the file c-clider.psd . After opened it with Photoshop you migh find it a littel confusing. On the left site you find the combined background-image and on the other site there is a preview of how the cSlider box. The confusing site is a little confusing while i tried to reduce the number of HTTP requests and use only a single background-image.

You will see that the psd has two groups with similar named layers. Play a little with layerstyles and colors of the upper group. Once you have a combination that meet the design of your page, just copy all your changes to the layers of the lower group.

Now crop canvas size to 65px width while keeping the upper left corner in place. After cropping you should see only the confusing parts. Save For Web as PNG 24 and done.

Feedback

I'm looking forward to get your feedback! Please use the commentform at http://samisdat.org/cSlider.

Licence

cSlider is licenced under Creative Commons BY-SA Please have a look to the licence if you are not sure what is means.

Besides my script, stylesheets and images the .zip contains several more files: