How to Create Multiple Flash Slide Shows on the Same Page

Have you ever wanted to add several flash slide shows to the same page but had no idea how to do it?

In 2007 I wrote an article on How to Create a Flash Slide Show. If you read the comments you’ll see some people ran into problems with it.

Recently a client asked to create 3 flash slide shows on his photography web site.

Here’s what I did:

1. Download the JV image rotator zip file to your computer and unzip the files.

2. Add the files and photos to your web site

imagerotator.swf
index.html
imagerotator.xml
swfobject.js
video.flv

Note: I placed the images in a separate folder called “Images”. If you do this make sure you have the correct file paths in the .xml file as shown below.

3. Edit the imagerotator.xml file so that it contains URLs of your images. Add more photos, by pasting additional track blocks in the .xml file.

Example XML Code for 1 silde show


<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track> <location>http://www.pboonisar.com/Images/RF-PC-1.jpg</location>
</track>

<track> <location>http://www.pboonisar.com/Images/RF-PC-2.jpg</location>
</track>

<track> <location>http://www.pboonisar.com/Images/RF-PC-3.jpg</location>
</track>

<track> <location>http://www.pboonisar.com/Images/RF-PC-4.jpg</location>
</track>
</playlist>


4. Here’s the script code I used to create 3 flash shows on the same web page


<div id="container1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<p>
  <script type="text/javascript" src="flash/swfobject.js"></script>
  <script type="text/javascript">
var s1 = new SWFObject("flash/imagerotator.swf","rotator","216","162","7");
s1.addParam("allowfullscreen","false");
s1.addVariable("file","flash/panama.xml");
s1.addVariable("width","216");
s1.addVariable("height","162");
s1.write("container1");
</script>

<div id="container2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
var s2 = new SWFObject("flash/imagerotator.swf","rotator","216","162","7");
s2.addParam("allowfullscreen","false");
s2.addVariable("file","flash/airforce.xml");
s2.addVariable("width","216");
s2.addVariable("height","162");
s2.write("container2");
</script>
</td>

<div id="container3"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
var s3 = new SWFObject("flash/imagerotator.swf","rotator","216","162","7");
s3.addParam("allowfullscreen","false");
s3.addVariable("file","flash/scenic.xml");
s3.addVariable("width","216");
s3.addVariable("height","162");
s3.write("container3");
</script>

Tip
To embed the JW Image Rotator multiple times in the same page you simply need to use a separate xml file for each slide and make sure to use a separate slideshow ID for each.

Click here to view the example of multiple flash slide shows on the same page