The following code…

refers to the position of the small images on the left.

Refers to the position where the big image displays hovering over a small image.

Refers to the position of the big image displaying when the page loads and when not hovering over a small image. The parameters of this must equal the ones which refer to the position where the big image displays hovering over a small image.

Is used to give the code enough room.

Every image has the following code

In there you see twice the URL to the image.

Where it says

enter the URL to the photo you want to display when the page loads.

Try reloading this page a few times and you will see that this photo here will change at random or shuffle each time you reload the page…

Having a photo which changes every time the page is loaded is really easy. The good thing is that to visitors visiting your website from time to time it will look like you updated the website since the last time even if you didn’t. For more regular visitors it’s nice to have something changing from time to time. Also you can use it to point people to different pages randomly since every image can be linked to a particular page if you want (different photo galleries, pages you recently updated and more).

How this is done and how to add it to your theme is described in my WordPressFAQ.org E-Book (15$)

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:

How this is done is described on my WordPressFAQ.org E-Book (15$)

Here’s an example of the best and most beautiful flash music player I’ve seen so far… (you have to hit play since I’ve set it to not-auto-play, also try changing album, …)

All the music in this player is available at Jamendo.com for free (donationware)

The retro Vinyl records player simply looks fantastic and is really easy to use and customize. I think it’s a must have for all the nostalgic music fanatics (like me) and the musicians among you.

Chapter 1: Where to get the retro record player
Chapter 2: How to set up the player (basics)
Chapter 3: How to customize the player and its look
Chapter 4: How to install the player on your website

Chapter 1: Where to get the retro record player

The player is called Advanced XML Retro Record / MP3 Player and is sold here for 22$

It contains detailed instructions and video tutorials which are very well made.

(Beware: Not all you buy from that site is as easy to use and has such detailed instructions as this player!)

Chapter 2: How to set up the player (basics)

Even if it’s a Flash player you don’t have to know anything about Flash to setup the player since everything can be set in an XML file (the name XML is scary but it’s the easiest thing in the world to use). I will be covering only the basics here which is self explanatory for detailed instructions refer to the help files included in the player’s folder.

Once you bought the player and downloaded it you will get a folder called “RECORD_PLAYER”.

First we will take care of the covers of the albums, then the music files and setting up the player.

1. Take the images of your album covers and resize them to 100×98 to avoid distortions. In other words 100px (width) and 98px (height).
2. Give them easy names avoiding spaces (replace them with _ underscores), avoid special characters like è ü (replace with e ü) also avoid ! ?.
3. Put them in the folder called “covers” which you find in the “RECORD_PLAYER” folder.

The music files…

1. Take your music files and again give them easy names avoiding spaces (replace them with _ underscores), avoid special characters like è ü (replace with e ü) also avoid ! ?. Remember to add the extension .mp3 at the end of the files if it’s not yet there.
2. Put them in the folder called “music” which you find in the “RECORD_PLAYER” folder.

Now we will setup the albums for the player…

1. Open the “xml” folder and you will find a file called “siteData.xml” open that file in TextWrangler (download for free here)
2. You will find something like this:



3. Replace the information you find (in the image above in red) to fit your case: Title of the album, name of the artist, the info about the album like when it’s been released or the record label or whatever you want
Change the filename of the cover of the album to the filename you gave the image of the album’s cover. Note that you only need type in the file’s name (with extension .jpg, .png or whatever)
recordClean.jpg is used to change the Vinyl record itself (see How to customize the look of the player for more info)
Change the filename of the music file to play for the first song and those which follow. Again you only have to type in the name of the file with the extension .mp3
Enter the title of the first song and the following ones
needleRotation is used to get the needle of the player from the outside to the inside of the record. It should be a progressive/increasing sequence when you enter the songs of the albums. Between 19 for the first song (the outside of the record) and 38 (the inside/center a record) for the last song.
4. Once you changed the stuff save the file and the player is ready. Check it by opening the index.html file you find in the “RECORD_PLAYER” folder in your Browser (eg. Safari).

Chapter 3: How to customize the player and its look

We’ve already seen how to customize the album covers. However in this player you can really customize everything you want of the retro player! Example:

recordClean.jpg is used to change the Vinyl record itself. You find an original file to create your own record in Photoshop in the “MASTER_IMAGES” folder. Once you created your own save it as 220x220px image to the “images” folder. Same for many other things.

Other settings are made in the siteData.xml file previously mentioned:



There are two player types “retro” and “clean”. Per default you can set the background to “retroBG” or “cleanBG”, “CleanBG2” but of course you can create your own background as well.

autoPlaySongs set to “yes” the songs will start automatically, set to “no” people will have to click play for the music to start.

Chapter 4: How to install the player on your website

The first thing to do is take out the VIDEO_TUTORIALS folder from the RECORD_PLAYER folder to speed up upload times and to save space on the server. Then upload the player’s folder to your server. I would recommend you to upload it to the root of your server so entering

http://yourdomain.com/RECORD_PLAYER/

in your browser will bring up your player. Of course you can rename the folder to whatever you want (just don’t use spaces nor special characters).

Now either have it opening in a popup window (use http://yourdomain.com/RECORD_PLAYER/index.html for the page to open in the window, you can change the background by editing the index.html file itself) or use this code to embed the player in your page:

Of course you can also put the code opening the popup window with the player in your sidebar for people to see it no matter what page or post they visit.

How this is done and how to add it to your theme is described in my WordPressFAQ.org E-Book (15$)

How this is done and how to add it to your theme is described in my WordPressFAQ.org E-Book (15$)

How this is done and how to add it to your theme is described in my WordPressFAQ.org E-Book (15$)

The menu’s official site is phatfusion.net

Apple has that Hot News Headlines ticker towards the bottom of their website which shows the titles of their recent articles with a fade-in and fade-out effect.

On the Apple site if you click on a headline you’re automatically redirected to the appropriate article. Example (click on a headline to get to the page):

Of course it can’t only be used for news-tickers. It can be used for bubbles like in cartoons as well…

How this is done is described in my WordPressFAQ.org E-Book (15$)

I would like to add a panoramic photo to my website which moves automatically from right to left on a page. I also would like to have a News-Ticker or ticker bar on my website like the news scroll bar at the bottom on TV when watching CNN. How can I do that?

How this is done is described on my WordPressFAQ.org E-Book (15$)

Here some examples (picture at the top is from Wikipedia)

How can I add falling snow to my website? What is a Snow Leopard without snow?

In the example I changed the color of the snow flakes to black since my website is all white. Per default it is white.

Adding snow to your website is pretty easy. All you have to do is…

1. Go to this page and download the source code of the snowstorm.

Upload the snowstorm.js file to the root of your server

2. Go to the page or post you want to add the snow to and paste the following line of code in it:

This FAQ is more extensively explained in my WordPressFAQ.org E-Book (15$)