How to add JW Image Rotator 3.17 (XML/FLASH)
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 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.
Handling Flash Banner clicks |
Flash has an internal attribute called clickTAG that we can use.
All you need to do is create a button on top layer, make it transparent (Alpha 100%) and add this code in the button action
- on (release) {
- getURL(clickTAG, "_top");
- }
Export the movie and you’re done with the Flash file, now, we just need to add a new flashvar called
clickTAG=http://mystore.com/myproduct
the example above with the clickTAG would be:
- <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", "clickTAG=http://mystore.com/myproduct&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>
Tracking click (Optional) |
Maybe you want a way to track how many clicks a banner had, what I’m doing here is to ADD a new TABLE to your MAGENTO Database but you can have it written to a file if desire, just follow some PHP Write to File tutorials.
- Open your mySQL tool (normally phpMyAdmin - Execute the code:
- CREATE TABLE IF NOT EXISTS `ads_tracking` (
- `ad_tracking_id` int(6) NOT NULL AUTO_INCREMENT,
- `ad_datetime` datetime NOT NULL,
- `ad_referer` varchar(150) NOT NULL,
- `ad_click` int(6) NOT NULL DEFAULT '1',
- `ad_clientip` varchar(150) DEFAULT NULL,
- `ad_querystring` varchar(150) DEFAULT NULL,
- PRIMARY KEY (`adrecord_id`)
- ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=778;
- Now that the code is in place, let’s go back to our Magento FTP and create a folder called ‘ads’ on the root of the Magento installation (where app and skin folders are) - create a PHP file, named track.php and fill it up with this content - Now you just need to change the clickTAG flashvar to something like: clickTAG=http://mystore.com/myproduct?adid=Banner_001
TODO: You can easily create a page named index.php into ads folder with the fetch of this table information and navigate to http://www.mystore.com/ads and see the Banners results
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.
Author of the page: joxmiguel Click handling and Tracking: balexandre
