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.

Chapter 1: ImageFlow

Chapter 2: Another CoverFlow

Chapter 1: ImageFlow

Here’s an example:

Please note that it doesn’t work on MobileMe since MobileMe doesn’t support PHP (whereas Chapter 2 should work on MobileMe too).

1. Go to http://imageflow.finnrudolph.de/ and download ImageFlow

2. You will then get a folder. I will call it “ImageFlow”.

3. Open the folder and you will find a folder called “img”. That’s where you have to put the images you want to display in the CoverFlow.

4. Once you did put the images in the folder select the “index.html” file in the “ImageFlow” folder and right click on it (ctrl-click) and choose Open with=>TextEdit. You will see the following:

5. As you see for each image displaying in the ImageFlow there is the following line of code:

<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 1" />

Change the name of the image, its extension (.png, jpg, ...) and the width and height parameters to fit the case of each of your images you did put into the “img” folder. Avoid spaces in the pictures name. To make it easier name them “image1.jpg”, “image2.jpg”, ...

You can add more images by inserting more codes like the one posted previously or remove the lines which are not needed.

6. Once you’ve set everything up select the “ImageFlow” folder. Hit ctrl-click (right click) and choose “Get info”. Hit the lock on the bottom right corner and change the “Everyone” permission to Read&Write. From the gear-symbol choose “Apply to enclosed items”. Take the whole “ImageFlow” folder and upload it to your server’s root (main location) with an FTP application so that entering

http://yourdomain.com/ImageFlow/index.xml

into your browser will display the ImageFlow.

7. To embed it into one of your iWeb pages use an iFrame. Copy and paste the code for the iFrame into an HTML Snippet. The URL which needs to be entered in the iFrame code is

http://yourdomain.com/ImageFlow/index.xml

Change width and height parameters of the iFrame to fit the ImageFlow.

Note 1: By default clicking on an image in the ImageFlow redirects people to the full-size image. This causes the image to open in the iFrame/HTML Snippet-space only and the CoverFlow to disappear. People will have to hit the “Back” button of their browser to have the ImageFlow displaying again. To me that’s not a good idea so what I would suggest you to do is delete the “longdesc="img/img1.png"” part of the code resulting in

<img src="img/img1.png" width="400" height="300" alt="Image 1" />

Note 2: You can link the image to a web address (URL) of a page so that when someone clicks on an image the page opens. Again since it’s embedded with an iFrame in an HTML Snippet the page will only load in the HTML Snippet area. If you build the page that loads there you could offer a link back to the ImageFlow page on it.

Chapter 2: Another CoverFlow

Here’s an example:

1. Go to http://www.weberdesignlabs.com/blog/?p=11 and download

Difference between the CS3 and the Flash version:

The Flash version will change from one album-cover to another automatically whereas the CS3 doesn’t (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 TextEdit. Select the file, ctrl-click (right click) it and choose Open with, TextEdit. That’s what you will see:

5. For each picture displaying in the CoverFlow there is this code:

<albuminfo>

<artLocation>album1.jpg</artLocation>

<artist>The Doors</artist>

<albumName>Greatest Hits</albumName>

<artistLink>http://www.google.com</artistLink>

<albumLink>http://www.yahoo.com</albumLink>

</albuminfo>

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 select the “CoverFlow” folder. Hit ctrl-click (right click) and choose “Get info”. Hit the lock on the bottom right corner and change the “Everyone” permission to Read&Write. From the gear-symbol choose “Apply to enclosed items”. Take the whole “CoverFlow” folder and upload it to your server’s root (main location) with an FTP application so that entering

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

into your browser will display the CoverFlow.

7. To embed it into one of your iWeb pages use an iFrame. Copy and paste the code for the iFrame into an HTML Snippet. The URL which needs to be entered in the iFrame code is

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

Change width and height parameters of the iFrame to fit the ImageFlow.

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

Note: On this CoverFlow the links open in a new window so there’s not the problem of Chapter 1 about the links opening in the iFrame/HTML Snippet area only.

iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s presented by Cédric and hosted by HostExcellence.com

I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.

Thank you for visiting and supporting my website.

- Cédric -