A Simple Popular Post Widget and Image Rotator

After jCarousel, with which you can easily create a riding carousel to display the popular posts on your blog, a few days back I came across another, very beautiful, lightweight and easier to use image rotator for blogs and websites, the JW Image Rotator 3.17.

The JW Image Rotator (built with Adobe's Flash) enables you to display photos in sequence with fluid transitions. It supports rotation of an RSS, XSPF or ASX playlists with JPG, GIF and PNG images, a wide range of flashvars (variables) for tweaking both behavior and appearance and an extensive javascript API.

Installing the JW Image Rotator is pretty simple. You can download the ZIP files, which contains all you need to get started by clicking here. Then you need to transfer the imagerotator.swf and imagerotator.xml file from the ZIP to your website. (Make sure that you've also uploaded all photos you want to show onto your site.) After this you need to edit the imagerotator.xml file so that it contains the titles, links and image URLs of your images. This can be done by using a simple text editor like Notepad.

If you want to add more photos, just paste additional track blocks in the .xml file. Then embed the Image Rotator in your HTML page with the following lines of code. (Note: If you place the files in different directories, be sure to set the references in this embed code accordingly.)

<embed
src="imagerotator.swf"
width="470"
height="160"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=imagerotator.xml&transition=blocks"
/>

Notice that the flashvars parameter can contain a list of variables for configuring the rotator. Select the variables you want to use and insert their names/values onto your page. It's that simple.

While using the JW Image Rotator, help is just a few clicks away. You would find the documentation of the rotator at the developer site. It includes the roadmap, source code and bug tickets, as well as:

1. Supported flashvars (variables) you can select to customize the Image Rotator.
2. Supported playlist formats along with some implementation info.
3. The javascript API calls supported by the rotator.

If you need more help, check out the tutorial on Embedding flash objects. It covers the simple embed method and the SWF Object method.

And here's a list with some frequently-encountered problems.

1. If you get strange display errors on IE (e.g. after refreshing), it's likely the stage size is not properly set. Use the flashvars width and height to fix this problem.
2. JavaScript interaction and playing remote files will not work when testing locally because of security restrictions.
3. If your MP3 files playback is is too fast or too slow, they contain variable bitrate encoding or unsupported sample frequencies (eg 48Khz). Please stick to constant bit rate encoding and 11,22,33,44 kHz. If you need a free MP3 encoder, check out iTunes software.

Lastly, for tips, tricks, additional information and bug reports, you can always visit their support forum.

So why don't you just go ahead and try it out on your blog. But don't forget to let me know hows it working. And don't forget to subscribe to The Chronicles of R's feed to remain updated with the latest news on technology and social media.