How can I add the cover flow effect to my website?

CoverFlow is a technology which is highly used by Apple. You find it in iTunes, in the Finder on iPhones and iPodTouches.

Embedding the CoverFlows with an iFrame as described here is not an ideal solution. However it’s the easiest and the only one I can offer you right now.

Here’s an example:

1. Go to http://www.weberdesignlabs.com/blog/?p=11 and download one of the available versions: CS3 or Flash version.
- The Flash version will change from one album-cover to another automatically
- The CS3 doesn’t change automatically (people will have to click on a an album-cover to have it changing).
I personally prefer the CS3 version. The how-to setup the CoverFlow is exactly the same for both.
2. Once you downloaded it you will get a folder which I will rename “CoverFlow”
3. Open the folder and you will see the images used in the CoverFlow. You can replace them with your own images. Also you can add more or less images just as you want.
4. Open the “albuminfo.xml” file with TextWrangler if you’re on a Mac. Select the file, ctrl-click (right click) it and choose Open with, TextWrangler. If you’re on a PC open it in Notepad. The image on the left side on this page shows you what you will see.
5. For each picture displaying in the CoverFlow there is this code:

Replace “album.jpg” with the name of the picture you want to display
Replace “The Doors” with the name of the artist/band you want to display under the album-art or album-cover
Replace “Greatest Hits” with the name of the album which will display under the artist name
http://www.google.com is the URL which is opened when clicking on the artist name
http://www.yahoo.com is the URL which is opened when clicking on the album cover/artwork (the picture) and the name of the album
Of course you could also delete the link-lines if you don’t want the image to act as a link or simply leave them empty.
6. Once you’ve set everything up take the whole “CoverFlow” folder and upload it to your server’s root (main location) with an FTP application

Entering:

http://yourdomain.com/CoverFlow/index.html

into your browser will display the CoverFlow.

7. In WordPress go to the post or page where you want to add the CoverFlow to and add following code:

Change yourdomain.com to your domain and publish or update the post or page.

Of course you could place whatever image and text you want on the Cover Flow. It doesn’t necessarily have to be about music.