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 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>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 isnt 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 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="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/myContent.swf","myContent","470","230","9","#FFFFFF", "http://www.mysite.com/media/expressInstall.swf");
  6. s0.addParam("allowfullscreen","true");
  7. s0.addParam("allowscriptaccess","always");
  8. 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");
  9. s0.write("myContent");
  10. </script>
  1. Now click SAVE.

Recomendations

  • 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

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