Grab the latest release of JW Image Rotator from http://www.longtailvideo.com/
players/jw-image-rotator/.
1. Extract the downloaded files and copy the imagerotator.swf in the /media/
content/flash/ directory.
2. Create a new directory named imagerotator in /js directory and paste the
extracted swfobject.js file in it.
3. Drop some images in media/content/images/ folder for showing in JW Image
Rotator, which will be linked in packt.xml file. Create a new XML file named packt.
xml in the media/content/flash/ directory and paste the following code:
<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>Amisha patel</title>
<creator>PACKT PUBLISHERS</creator>
<location>http://magento.local.com/media/content/images/
amisha.jpg</location>
<info>http://www.packtpub.com</info>
</track>
<track>
<title>Gold fish</title>
<creator>PACKT PUBLISHERS</creator>
<location>http://magento.local.com/media/content/
images/fish.jpg</location>
<info>http://www.packtpub.com</info>
</track>
<track>
<title>Bolt</title>
<creator>PACKT PUBLISHERS</creator>
<location>http://magento.local.com/media/content/
images/bolt.jpg</location>
<info>http://www.packtpub.com</info>
</track>
</trackList>
</playlist>
4. Replace the title location and other information as required.
5. We have to add the swfobject.js file from the js/imagerotator/ directory
through the page.xml file, which is located in the app/design/frontend/YOUR_
INTERFACE/YOUR_THEME/layout/ directory. In the head block, add this line to
load the swfobject.js file (possibly in line 37):
<action method="addJs"><script>imagerotator/swfobject.js</
script></action>
6. Let's add this gallery to our home page now. Log in to Magento admin area and open
the home page from CMS | Pages | Home Page | Content.
7. Paste the following code inside the <div class="home-spot"> tag:
<div id="packtGallery" style="text-align:center;"><a href="http://
www.adobe.com/go/getflashplayer" target="_blank"> <img
src="http://www.adobe.com/macromedia/style_guide/images/160x41_
Get_Flash_Player.jpg" alt="" /> </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">here</a></p>
</div>
<script type="text/javascript">// <![CDATA[
var gallery = new SWFObject("http://magento.local.com/media/
content/flash/imagerotator.swf","packtGallery","470","230","
9","#FFFFFF", "http://magento.local.com/media/content/flash/
expressInstall.swf");
gallery.addParam("allowfullscreen","true");
gallery.addParam("wmode","transparent");
gallery.addParam("allowscriptaccess","always");
gallery.addParam("flashvars", "file=http://magento.local.com/
media/content/flash/packt.xml&autostart=true&allowscriptaccess=alw
ays&showicons=false&transition=slowfade&shownavigation=true&overst
retch=true&backcolor=0x000000&repeat=true&rotatetime=5&shuffle=fal
se&linktarget=_self&linkfromdisplay=true&width=470&height=230");
gallery.write("packtGallery");
// ]]></script>
8. Save the home page now and see it in action.