Cover flow

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.

Chapter 1: Cover Flow
Chapter 2: Cover Flow slideshow

Chapter 1: Cover Flow

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/2009/12/flash-10-coverflow/ and download the Flash 10 Coverflow
2. Once you downloaded it you will get a folder. Rename the folder to CoverFlow
3. Open the folder and you will find other folders.
In the images folder put the images you want to use in the coverflow replacing the sample images. Renaming the images album1.jpg album2.jpg and so on helps to keep track of them. You can add more or less images just as you want. The images have to be of the size you want to have them displaying in the coverflow.
4. Open the data.xml file you find in the xml folder with TextWrangler. Select the file, ctrl-click (right click) it and choose Open with, TextWrangler. 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:

<cover
img="images/album1.jpg"
title="The Doors"
link="http://www.google.com" />

Replace album1.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/album-cover or under the picture
Replace http://www.ilike.com/... with the URL you want to open when clicking on the album cover/artwork (the picture). If you don’t want the image to act as a link simply leave the links empty.
6. If you want to have more images displaying just add more codes like the one posted above. If you want to have less images remove some.
7. At the top of the data.xml file you can define what size you want the images to display in (width and height are in px). Same as the size of the images you put in the images folder. You can also set the target of the links. By default they open in a new window (target="_blank").
8. Once you've set everything up here open the index.html file you find in the CoverFlow folder in TextWrangler. Here we have to correct something. Right before change this line

swfobject.embedSWF("swf/main.swf"

to

swfobject.embedSWF("swf/Main.swf"

hence replace the main.swf with Main.swf (capital letter). On the same line change the sizes "590", "300", (width and height) to the size you want the CoverFlow to display on your page. Save the file and that's it.
9. Take the whole “CoverFlow” folder and upload it to your server’s root with an FTP application (What is the root of a server/website?)
Entering:

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

into your browser will display the CoverFlow.
10. On the page where you want to add the CoverFlow add the following code:

<iframe src="http://yourdomain.com/CoverFlow/index.html" style="width:590px; height:300px; border-width:0px; border-color:#990033; border-style:solid;" scrolling="no" ></iframe>

Change yourdomain.com to your domain, adapt width and height if needed.

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

Chapter 2: Cover Flow slideshow

In the CoverFlow slideshow people first choose a thumbnail and click on it then click on it again and the image displays bigger underneath the Cover Flow. Here’s an example:


Of course all sizes can be changed to fit your needs.

How this is done is described in my WPFAQ.org E-Book (sample)


This FAQ is also discussed in my WPFAQ.org E-Book (sample)


© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -




Now share it…

Share

Comments are closed.