SlideShowPro Director

How to: use player methods and events

The SlideShowPro Player offers a number of methods and events that can be accessed through the player embed code you copy/paste into your HTML document. We'll explain how here.

Embed slideshow

The first step is to embed a slideshow from SlideShowPro Director into your HTML document. If you haven't done so already, click here for instructions.

Assign variable

In order to call player methods and setup events we need to assign a variable to the SlideShowPro Player instance. Do so by storing the instance in a variable, like so:

<script type="text/javascript">
	var ssp = SlideShowPro({
		attributes: {
			id: "album-1",
			width: 550,
			height: 400
		},
		params: {
			bgcolor: "#000000",
			allowfullscreen: true
		},
		flashvars: {
			xmlFilePath: "http://yourdomain.com/slideshowpro/images.php?album=1"
		}
	});
</script>

Enable External Interface

By default, Director disables the External Interface functionality that SlideShowPro uses to communicate back to your JavaScript. So, we need to enable it in the flashvars section of the embed code:

<script type="text/javascript">
	var ssp = SlideShowPro({
		attributes: {
			id: "album-1",
			width: 550,
			height: 400
		},
		params: {
			bgcolor: "#000000",
			allowfullscreen: true
		},
		flashvars: {
			xmlFilePath: "http://yourdomain.com/slideshowpro/images.php?album=1",
			useExternalInterface: true
		}
	});
</script>

Create method hyperlink

With the variable created we can now call SlideShowPro Player methods on it. For example, if we wanted to publish a text link that requested the next image in the player, you'd include a hyperlink like this:

<a href="#" onclick="ssp.nextImage();" title="Next image">Next image</a>

Or, to load one of the albums in the slideshow:

<a href="#" onclick="ssp.loadAlbum('album-1');" title="Load album">Load album</a>

Setup event listener

Now let's setup an event listener. You can listen for any SlideShowPro Player event by attaching an event listener to the player's variable, for example:

<script type="text/javascript">
	var ssp = SlideShowPro({
		attributes: {
			id: "album-1",
			width: 550,
			height: 400
		},
		params: {
			bgcolor: "#000000",
			allowfullscreen: true
		},
		flashvars: {
			xmlFilePath: "http://yourdomain.com/slideshowpro/images.php?album=1",
			useExternalInterface: true
		}
	});
    ssp.addEventListener('imageData', function(eventObject) {
            console.log(eventObject.data.title);
	});
</script>

Open the JavaScript Console in your web browser and you'll see the title of the current photo/video.