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

Last modified by balexandre 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 functionality 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 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.
  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>js/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, http://www.mystore.com/media/madrid1.jpg
  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 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).
  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="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>
  3. </div>
  4. <script type="text/javascript">
  5. var s0 = new SWFObject("http://www.mysite.com/media/imagerotator.swf","myContent","470","230","9","#FFFFFF", "http://www.mysite.com/media/expressInstall.swf");
  6. s0.addParam("allowfullscreen","true");
  7. s0.addParam("wmode","transparent");
  8. s0.addParam("allowscriptaccess","always");
  9. 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");
  10. s0.write("myContent");
  11. </script>
  1. 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

  1. on (release) {
  2.   getURL(clickTAG, "_top");
  3. }

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:

  1. <div id="myContent" style="text-align:center;">
  2. <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>
  3. </div>
  4. <script type="text/javascript">
  5. var s0 = new SWFObject("http://www.mysite.com/media/imagerotator.swf","myContent","470","230","9","#FFFFFF", "http://www.mysite.com/media/expressInstall.swf");
  6. s0.addParam("allowfullscreen","true");
  7. s0.addParam("wmode","transparent");
  8. s0.addParam("allowscriptaccess","always");
  9. 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");
  10. s0.write("myContent");
  11. </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.

  1. Open your mySQL tool (normally phpMyAdmin
  2. Execute the code:
  1. CREATE TABLE IF NOT EXISTS `ads_tracking` (
  2.   `ad_tracking_id` int(6) NOT NULL AUTO_INCREMENT,
  3.   `ad_datetime` datetime NOT NULL,
  4.   `ad_referer` varchar(150) NOT NULL,
  5.   `ad_click` int(6) NOT NULL DEFAULT '1',
  6.   `ad_clientip` varchar(150) DEFAULT NULL,
  7.   `ad_querystring` varchar(150) DEFAULT NULL,
  8.   PRIMARY KEY  (`adrecord_id`)
  9. ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=778;
  1. 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)
  2. create a PHP file, named track.php and fill it up with this content
  3. 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! :-D, want help? PM Me.

Author of the page: joxmiguel Click handling and Tracking: balexandre

The Image Rotator in the front page




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs