Page 4 of 6 pages « First < 2 3 4 5 6 >

Debra’s Dynamic Gallery

Gallery Detail Template ("gallery-flickr")

Displaying the movie you made in SlideShowPro is easy. Here's where the SWFObject javascript comes into play.

In the <head> section of your xhtml, call the script:

<script type="text/javascript" src="http://www.yoursite.com/js/swfo.js"></script>

(I renamed the original file to "swfo.js" and put mine in a folder called “js” You should specify the full URL to the script. You can use EE's {path=site_index} variable to do that. ).

In your CSS file, or in the head section of your template, you need a <div> for the object (the slide show), with a unique id, like this:

<style type="text/css">
#flash {

  margin: .5em auto;

  padding: 0;

  width: 500px;

  }

</style>

This will put some space at the top and bottom of the movie, contain its width, which in this case is 500px, and center it on the page.

Then, where you want the movie to appear on the page, you call it with the swobject's parameters, like this:

<div id="flash">Sorry, you need Flash to see this</div>

<script type="text/javascript">

var so = new SWFObject("http://your-site.com/nameofyourmovie.swf", "your movie id", "your movie's width", "your movie's height", "7", "#FFFFFF");

so.addVariable("xmlfile", "http://yoursite.com/your xml template/{segment_2}");

so.write("flash");

</script>

</div>

The first line is the replacement content if the user doesn't have Flash, which basically tells them, 'sorry, you're outta luck'.

The "var so" line is telling it where the flash file is, its ID, its width and height, the lowest build number of the Flash player required, (for SlideShowPro, it's "7") and the background color.

The "so.addVariable" line is the key. It generates the path to the XML file for this movie. SlideshowPro uses an XML file to load images. Remember how we're passing the entry ID from the thumbnail? That's in the second segment of the URL. We're sticking it on the end of the URL here, so we can generate the xml file for each Flickr ID dynamically. Sweet!

Next: The XML file