FrontLook.com Newsletter Tip

Volume 2 - Issue 9 - December 2002

Jumping to a Slide in the Presenter Component
By David Pfeiffer

Make your FrontLook Component Effects slide shows interactive by allowing the viewer to click on a text or image hyperlink to jump to a particular slide in the presentation. This month's tip shows you how to add a simple line of JavaScript to the a text or image hyperlink to enable your viewer to navigate your presentation. This functionality is documented on the Component Effects Advanced page of the Component Effects Help file.

By configuring the JavaScript into single lines of code that is then placed into the URL field of the hyperlink properties, we can make simple controls for the FrontLook Component Effects without learning any formal scripting skills. For this example, the single line "Go To Slide" function will take the form:

javascript:var temp=MyComponentName.GotoSlide('Index');

where "javascript:" tells the browser that the following text is for the JavaScript interpreter, the var temp=" is a placeholder for the functions return value, the "MyComponentName" is the name of the component as set in the "Name" field on the Presenter's Component panel and "index" is the slide number. The "GotoSlide()" function tells the component to display the image and its caption at the specified index in the Images list. Valid range for the index values is from 1 to the number of images in the component. The component ignores invalid index values and maintains its state before the call. Also, please note that JavaScript is case sensitive.

Other Navigation functions:
Several other functions will be used in this example to facilitate easy user navigation.

javascript:MyComponentName.Begin();

where the Begin() function displays the first slide.

javascript:MyComponentName.Back();

where the Back() function displays the previous slide.

javascript:MyComponentName.Next();

where the Next() function displays the next slide.

The "var temp=" is not required for the Begin, Back and Next Functions since these functions do not return anything. See the Component Effects Advanced page of the Component Effects Help file for other functions.

Setup the Component
For this example, the Presenter component will be setup with complex captions. The same image/slide will be the same on every page, but the caption will be different. The caption for the first slide will allow the user view a set of eight thumbnails, each JavaScript-hyperlinked to a higher resolution image of the thumbnail. The Presenter Component was also chosen so that a full button bar controller could control the sequencing of the presentation. Please try the demo below and note the JavaScript URLs in the status bar of your browser.
 

Component Name Field

Copy the Component Name and substitute it into the JavaScript code

    javascript:var temp=SS20021228180033.GotoSlide('2');

Where the '2' is the slide number.

Now bring up the component and select the Red Blue Bar thumbnail image.

Slides Panel

press the H hyperlink link button. Put the line of JavaScript code

    javascript:var temp=SS20021228180033.GotoSlide('2');

into the URL field as show below and press OK.

Setting the URL to a JavaScript function.

This same type of technique was used to create the navigation buttons at the bottom of of each page. Here are the lines of JavaScript code used for the set of "Home" (Begin), "<" (Back) and ">" (Next) buttons.

    javascript:SS20021228180033.Begin();

       javascript:SS20021228180033.Back();

       javascript:SS20021228180033.Next();

For example, the "Home" navigation link is setup as shown below:

Basic Text Navigation

Setting up the "Home" Text Link

This process was followed to set up each of the links (note the JavaScript URLs in the status bar of your browser). This same process can be followed with any text or image hyperlink placed on the page.