How to use the JW ImageRotator

Posted on October 27, 2009 and last modified on October 27th, 2009.

To the left you can see an example of the JW ImageRotator in action. It is also being used on the front page of this site and in the sidebar area of the Gallery page. In the example on this page we show how to embed the JW ImageRotator into a post [defining the images to whatever size you wish and wrapping text around]. A standard black border with margins and padding is included within the CSS, to save the hassle of having to do this every time.

Each example is contained within a separate folder within your files. An example of this as follows:

root directory/images/portraits

In this folder there are:

the images being used [all the same size as specified in the Embed code above]
imagerotator.swf
portraits.xml

The JW ImageRotator also has a player control panel feature which can be used [sits at the bottom of the images] – but in this case it has been disabled.

To use the JW Imagerotator within a post we add the code as below and changing the size and paths accordingly.

<embed
src="imagerotator.swf"
width="200"
height="150"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file_name.xml&amp;transition=blocks"
/>

WordPress then will change this [when you click on Visual mode within the Post Editor] so that it appears as the following:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="200" height="150" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="flashvars" value="file=path_to/name_of.xml&amp;transition=blocks&amp;shownavigation=false" /><param name="src" value="path_to/imagerotator.swf" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="200" height="150" src="path_to/imagerotator.swf" allowfullscreen="true" flashvars="file=path_to/name_of.xml&amp;transition=blocks&amp;shownavigation=false"></embed></object>

By wrapping the embed code in any element using a class, i.e \’ir-left\’ or \’ir-right\’ the position, borders and padding etc are added automatically.

You also need to drop your photos/images into a directory and then call them using the code above. A few simple adjustments to a basic .xml file [editable in any text editor] and you are all set to go.

The .xml file in this instance contains the following:

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
	<trackList>

		<track>
			<title>About</title>
			<creator>Us</creator>
			<location>/images/portraits/1.jpg</location>
			</track>

		<track>
			<title>About</title>
			<creator>Us</creator>
			<location>/images/portraits/2.jpg</location>
			</track>

		<track>
			<title>About</title>
			<creator>Us</creator>
			<location>/images/portraits/3.jpg</location>
			</track>

		<track>
			<title>About</title>
			<creator>Us</creator>
			<location>/images/portraits/4.jpg</location>
			</track>

		<track>
			<title>About</title>
			<creator>Us</creator>
			<location>/images/portraits/5.jpg</location>
			</track>

		<track>
			<title>About</title>
			<creator>Us</creator>
			<location>/images/portraits/6.jpg</location>
			</track>			

	</trackList>
</playlist>

It sounds more daunting than it really is – you just need to do it a couple of times and then you will see it is really easy. The great part about it too, is it can be placed virtually anywhere on the site – in pages and posts, in the header, in the sidebar and footer. Very handy indeed!

For more details on the JW ImageRotator visit these links:

JW Imagerotator
Flashvars
Playlist Files

———————————–

Alternatively, you could display your profiles using the Simpleviewer gallery option. [More details about this theme-integrated method on the Gallery page.

Peel-Back Corner

Simpleviewer Galleries

Profiles

Quiet London

Abstract

About the author

James has added 29 posts to this site so far...

Founder and co-admin at FreshlyPressed, James also runs and maintains many, many other sites including JamesICT which is very much focussed on WordPress and all of its little idiosyncrasies. He now lives in Brighton, England with his fiancée and writes novels in his spare time. His latest work, 'Procrastination Expectancies' is due out later this year - or maybe the year after that! [more...]