How to add JW Image Rotator 3.17 (XML/FLASH)

Last modified by joxmiguel on Fri, June 25, 2010 11:09
Source|Old Revisions  

This is an old revision of the document!

Hello, this is my first contribution for the awesome Magento store, in this article we will add the funcionality of a Flash Image Gallery with XML Params and variables.

Install the files

  1. Download the JW IMAGE ROTATOR 3.17 (a great opensource flash banner script) from, inside the will be some archives, we will use the swfobject.js, madrid.xml,imagerotator.swf and the 3 images in there.
  2. In your /app/design/frontend/default/default/layout/page.xml, search this text <block type=”page/html_head” name=”head” as=”head”> in the next line copy and paste this text.
  1. <action method="addJs"><script>swfobject.js</script></action>
  1. Go to your js directory and copy the swfobject.js in there.
  2. In this case I will use the Media folder for my images, but its indiferent, and all my paths needs to be ABSOLUTE, for example,
  3. Copy the madrid.xml and imagerotator.swf to the media folder

Adding the code

  1. Now edit for XML file, the options are easy (like this totorial:-)) the things to know are, <location>madrid1.jpg</location>, this isnt an absolute URL, change it to <location></location> and remember, the <info> ... </info> is the URL when you click the image rotator (if you want ofcourse).
  2. Go to your admin console into the Home Page in ‘Manage Pages” add this:
  1. <div id="myContent" style="text-align:center;">
  2. <a href="" target="_blank" border="0"><img src=""></a><p>Hey! To view the section below as an interactive content feed</p><p> please install the latest version of the Adobe Flash Player clicking <a href="" target="_blank" border="0">here</a></p>
  3. </div>
  4. <script type="text/javascript">
  5. var s0 = new SWFObject("","myContent","470","230","9","#FFFFFF", "");
  6. s0.addParam("allowfullscreen","true");
  7. s0.addParam("wmode","transparent");
  8. s0.addParam("allowscriptaccess","always");
  9. s0.addParam("flashvars", "file=");
  10. s0.write("myContent");
  11. </script>
  1. Now click SAVE.


  • Dont forget the ABSOLUTE PATH of all files. (CMS, script, and xml file)
  • Where, myContent is the display of the banner.
  • “470”,”230”,”9”,”#FFFFFF” are Height, Weight, flash version, and color of the background of the image rotator.
  • the flashvars are the aditional parameters of the image rotator, look out here for the full list of vars.
  • The other content leave alone.
  • My magento version is 1.1.6
  • And remember The swfobject.js its a better way to put a flash in magento.

Now, should be in operation your flash image rotator banner, thanks for your time! :-D, want help? PM Me.

The Image Rotator in the front page