Download Help PDF (29MB) | Search:
Several touch-specific parameters can be passed through the Slideshow HTML code. The following tables summarize these parameters.
General Touch Enabling / Disabling Params
| Parameter Name | Values | Description |
|---|---|---|
| touch | detect (default), false or override | Specifies if special content should be provided for touch-screen devices. Important note: A touchMode parameter must also be explicitly specified, or only a generic notification message (Your mobile device does not currently support this content. Please view on a desktop or laptop computer.) will be displayed. By default, special content will automatically be provided for iOS and Android devices via browser detection. Specifying a value of false will disable any display of special content for touch-screen devices. Specifying a value of override forces the special content to always be displayed; this can be use while developing to view an approximate preview of the specified touchscreen content on a desktop in Safari or Chrome. |
| touchMode | none (default), inline or fs | Specifies the type of special content to be displayed for touch-screen devices. If not explicitly specified, the default 'special content' is a generic message that says: Your mobile device does not currently support this content. Please view on a desktop or laptop computer. Specifying a value of inline will cause an alternate HTML5 slideshow to be displayed in the page. This means the slideshow will appear as a part of the page, just like the standard Flash-based display appears on desktop and notebook computers. This value is best for slideshows where it is important for the content to appear within the context of the page -- e.g. image rotators or slideshows that aren't the main focus on a page. Inline presentations offer a high level of customization potential. Specifying a value of fs (short for full-screen) will cause a customizable "poster" to appear where the slideshow would normally appear in the page. Tapping on this poster will transfer the user into a separate full-screen slideshow experience specifically optimized for the touch-screen enviroment. This value is best for slideshows where the photos should take center stage and they needn't be viewed in the context of the slideshow's holder page. Fullscreen presentations are more immersive, but offer somewhat less customization potential than inline ones. When using fs as the touchMode value, you can create entirely customized poster HTML, or use the poster-related parameters below to customize the built-in poster. See the bottom of the page for information about creating a custom poster. |
Fullscreen-mode Configuration Params (Including Poster Appearance)
| Parameter Name | Values | Description |
|---|---|---|
| touchPoster | Path to image file | Specifies the image that will be displays as the poster. If this parameter is omitted, no image is displayed. If a poster image is specified, it can be any size; it will be centered within the available poster area. |
| touchPosterText | Text value | Specifies the text to be shown for the poster. If an image is specified for touchPoster, by default no text will be shown. If a touchPoster value is not specified, Launch Slideshow » will be shown by default. In either case, explicitly specifying a touchPosterText value will override the default. |
| touchPosterTextColor | Hex color, e.g. #000000 | Specifies the color of the touchPosterText that's shown (if any). If this parameter is omitted, the default is either white or black, depending on which contrasts the background color. |
| touchTitle | Text value | Specifies the page title displayed in the user's browser when they are viewing the fullscreen slideshow. If ommitted, defaults to Media Presentation. |
General Touch-Specific Configuration Params
| Parameter Name | Values | Description |
|---|---|---|
| touchBackgroundColor | Hex color, e.g. #000000 | Optional; if specified, overrides the backgroundColor value with a touch-specific value. |
| touchBackgroundAlpha | Numeric value, 0 (transparent) to 1 (opaque). | Optional; if specified, overrides the backgroundAlpha value with a touch-specific value. |
| touchBackgroundImage | Path to image file | Optional; if specified, overrides the backgroundImage value with a touch-specific value. |
| touchVideo | auto (default), true or false | If video in your presentation is causing a user-experience degradation or your video is not formatted for compatibility with touch-screen devices, it may be best to simply auto-remove video from presentations for touch-screen devices. This parameter controls whether the video is removed or not. The default value is auto, which means video is automatically shown for newer devices and removed for older devices that have trouble displaying video. Specifying a value of false makes the slideshow automatically remove all slides with video from the touchscreen-targeted presentation. Specifying true - not recommended - means the player will always attempt to play video, regardless of the device; this can result in errors or crashes. |
| touchVideoLoadingText | Text value | On devices such as the iPhone where video can only play in fullscreen mode, this determines the text that appears while the video is initializing. Default value is Loading Video... |
| touchLinks | Boolean true (default) or false | Also see next parameter. If this parameter is set to false, all slide links will be disabled in the slideshow. Often when using the fs (full-screen) touchMode, links will not be wanted since the point is to have an immersive self-contained experience. |
| touchLinksFS | Boolean true or false (default) | Also see previous parameter. For most full-screen presentations (a touchMode of fs), having slide links enabled disrupts the user experience. For this reason, slide links are by default removed in full-screen presentations. If you wish to avoid this behavior and have slide links left intact, set this parameter to true |
As described above, when a value of fs is specified for the touchMode parameter a poster will be displayed for touch-screen users where the slideshow usually appears on its holder page. Tapping this poster will open a separate full-screen immersive slideshow. By default, the appearance of this poster is controlled through the poster-related parameters above. If a higher level of customization is desired, however, it's also possible to specify completely custom HTML poster content.
To specify custom poster HTML, you will modify the slideshow HTML's holder <div> that proceeds the slideshow's javascript code block. (For more information about the slideshow HTML, see this topic.) This is where the alternate content for a slideshow is specified, and by default looks like this:
<div class="dwuser_xfs_v4_holder" style="width: 600px; height: 400px;">
<strong><a href="http://www.adobe.com/go/getflashplayer/">You need to upgrade your Flash Player and enable Javascript to view this content »</a></strong>
</div>
Custom poster content can be specified by adding a hidden <div> with a class of touchPoster like this:
<div class="dwuser_xfs_v4_holder" style="width: 600px; height: 400px;">
<strong><a href="http://www.adobe.com/go/getflashplayer/">You need to upgrade your Flash Player and enable Javascript to view this content »</a></strong>
<div class="touchPoster" style="display: none; color: #FFF; font-size: 20px; padding-top: 100px;" align="center">This is a custom touch poster.</div>
</div>
Note the use of display: none to initially hide the poster content. This is important; omitting this value will cause inappropriate alternate content to be displayed for desktop users without the Flash Player.
Any HTML content can be included within the div, and any styles can be applied to the div as long as display: none is among them.
Linking the custom poster content
By default, the entire custom poster content will be converted into a large link that redirects to the fullscreen slideshow presentation. If you want to only have a portion of the poster function as a link, use {link} within your HTML code. Each instance of {link} in the HTML will be replaced with the actual link. For example, your custom poster content could include:
View special fullscreen slideshow by <a href="{link}">clicking here</a>.