How to add JW Image Rotator 3.17 (XML/FLASH)
This is an old revision of the document!
Table of Contents
Hello, this is my first contribution for the awesome Magento store, in this article we will add the functionality of a Flash Image Gallery with XML Params and variables.
Install the files |
- Download the JW IMAGE ROTATOR 3.17 (a great opensource flash banner script) from http://www.jeroenwijering.com/?item=JW_Image_Rotator, inside the imagerotator.zip will be some archives, we will use the swfobject.js, madrid.xml,imagerotator.swf and the 3 images in there.
- 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.
- <action method="addJs"><script>js/swfobject.js</script></action>
- Go to your js directory and copy the swfobject.js in there.
- 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, http://www.mystore.com/media/madrid1.jpg
- Copy the madrid.xml and imagerotator.swf to the media folder
Adding the code |
- Now edit for XML file, the options are easy (like this totorial
) the things to know are, <location>madrid1.jpg</location>, this isn’t an absolute URL, change it to <location>http://www.mystore.com/media/madrid1.jpg</location> and remember, the <info> ... </info> is the URL when you click the image rotator (if you want of course). - Go to your admin console into the Home Page in ”Manage Pages” add this:
- <div id="myContent" style="text-align:center;">
- <a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg"></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="http://www.adobe.com/go/getflashplayer" target="_blank" border="0">here</a></p>
- </div>
- <script type="text/javascript">
- var s0 = new SWFObject("http://www.mysite.com/media/imagerotator.swf","myContent","470","230","9","#FFFFFF", "http://www.mysite.com/media/expressInstall.swf");
- s0.addParam("allowfullscreen","true");
- s0.addParam("wmode","transparent");
- s0.addParam("allowscriptaccess","always");
- s0.addParam("flashvars", "file=http://www.mysite.com/media/madrid.xml&autostart=true&allowscriptaccess=always&showicons=false&transition=slowfade&shownavigation=true&overstretch=false&backcolor=0x000000&repeat=true&rotatetime=5&shuffle=false&linktarget=_self&linkfromdisplay=true&width=470&height=230");
- s0.write("myContent");
- </script>
- Now click SAVE.
Recomendations |
- Don’t 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.
- Leave the other content alone.
- My magento version is 1.3.2.4 but was tested on 1.1.6 as well, so, works everywhere (at least 1.1.6+)
- And remember the swfobject.js is a better way to put flash into magento.
Now your flash image rotator banner should be operating, thanks for your time! 
, want help? PM Me.
