iWeb FAQ - Cover flow

iWebFAQ.org

 

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

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 


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: CoverFlow

Chapter 2: CoverFlow slideshow




Chapter 1: CoverFlow


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.

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


<cover

    img="images/album1.jpg"

    title="The Doors"

    link="http://www.ilike.com/artist/..." />


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 </head> 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. Open iWeb and on the page where you want to add the CoverFlow add an HTML Snippet with 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 and hit “Apply”. The CoverFlow should show up in iWeb itself.


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: CoverFlow 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 iWebFAQ.org E-Book (sample)




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

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark