Using Self-Rendering Mode

Highslide JS can be used to display flash content in the expander popup window.  By far, the easiest way is to use Highslide's self-rendering mode.  Self-rendering mode simply means that you don't specify the HTML used for the popup in the expander, but rather, a 'predefined' content wrapper is automatically used to render the popup.  The content wrapper or skin can be changed in the Highslide configuration if the default skin does not meet your needs.  Click on the  HTML expander link below to see an example of self-rendering mode.

Self-Rendering HTML expander

As you can see, self-rendering mode provides a 'move' and 'close' link above the video portion of the display. The HsHtmlExpander settings used for the self-rendering example are explained below. First the Expander tab.

The expander tab is where you provide the link to the flash content that you want displayed in the popup.  Notice that 'Object type' is set to 'Flash'.

In the example, the Options tab was used to set the 'rounded-white' graphic outline for the popup window and to provide some caption text in the popup.  These settings are totally optional.

The Flash tab is where you define flash specific information. The object width and height values define the size of the video in the popup window and must be provided.  The remaining parameters on the tab are advanced Flash specific variables.  Unless you have a special requirement, you can ignore these for the most part.  The params setting shown above are only included to provide an example of how to specify the values.  You can find more information about flash variables, etc. on the highslide website.

Providing Your Own HTML Wrapper

If self-rendering mode does not meet your needs or you have a special requirement for a particular video, you can specify your own HTML wrapper in the HsHtmlExpander.  The expander below provides its own HTML wrapper to give the popup next and previous links as well as the move and close links.

Display Flash

The HsHtmlExpander settings for this expander are the same as the self-rendering mode example with the addition of the HTML tab settings.

The content id parameter is a required entry and is used to give your html wrapper a unique HTML id on the web page.  This can be used for css styling if desired. The value can be anything as long as it is a valid HTML id and is unique to all other ids defined on the page.

The style parameter is used to define the width of the popup window.  The height of the window is automatically determined by Highslide.

The html content area defines the HTML wrapper that you want to use for your popup content.  The HTML in the example can be broken down as follows:

A DIV is defined to provide space for the next, previous, move and close links followed by the 4 links themselves. A second DIV  with a class name 'highslide-body' is defined to tell highslide that this is where you wish the content, i.e. the flash video, to be placed in the popup.

Notice the {hs.lang.xxxx} values in the links.  These are language variables that get resolved at page load time. They are replaced with the appropriate text as defined by the viewers browser language setting.  For example, rather than hard coding the word 'Close' in the close link, the value {hs.lang.closeText} was used.  When the page is viewed by someone that has their browser's preferred language set to 'english', the variable is replaced with the word 'CLOSE'.  If another viewer with a  browser setting of 'french' views the same page, the variable will be replaced with the french term for close, i.e. 'FERMER'.