Controlling SlideShowPro Navigation with Javascript
I’ve been really impressed with the latest releases of Director and ThumbGrid from Slideshow Pro. I am planning on using them to replace a JavaScript based slideshow that I feel loads abnormally in different browsers. SlideShowPro really has simplified the process for me, by providing some great administrative and presentation tools.
Here are the basics of wiring up the JavaScript navigation to the slide show.
In the flash document (fla) in a new key frame I placed the following:
1: import flash.external.*;
2: ExternalInterface.addCallback("sspNextImage", sspNextImage);
3: ExternalInterface.addCallback("sspPrevImage", sspPrevImage);
4: function sspNextImage() {
5: my_ssp.nextImage();
6: }
7: function sspPrevImage() {
8: my_ssp.previousImage();
9: }
This code basically exposes the SSP API to an external agent such as JavaScript
Then in my web page document in the HEAD tag I included the following:
1: <script type="text/javascript">
2: function sspNextImage() {
3: thisMovie("ssp_kg").sspNextImage();
4: }
5: function sspPrevImage() {
6: thisMovie("ssp_kg").sspPrevImage();
7: }
8: function thisMovie(movieName) {
9: if (navigator.appName.indexOf("Microsoft") != -1) {
10: return window[movieName]
11: } else {
12: return document[movieName]
13: }
14: }
15: </script>
Note that “ssp_kg” is the name of my slide show presentation.
The only thing left to do was to setup the links to call the new JavaScript functions:
<p class="gallery-nav"> <a onclick="sspPrevImage(); return false;" href="#">« Previous</a> | <a onclick="sspNextImage(); return false;" href="#">Next »</a> </p>
In the end it was very straight forward and I was well satisfied with the results:
Sample Page: KeeGuard Roof Top Railing – Fall Protection System
















One Comment, Comment or Ping
Tosin
Good job. I have to adopt a concept like this in my nex project.
Sep 3rd, 2009
Reply to “Controlling SlideShowPro Navigation with Javascript”