XML Flash Slideshow v4 Help    |    Support Home    |    DWUser.com Home  Download Help PDF (29MB)    |    Search:

Building Inline Touch-Mode Layouts

Using the Inline touch mode allows for a higher level of customization, making it possible to build a custom layout in a manner similar to the standard Flash-based display.  This section provides information on how to build these layouts.

Where Inline Touch-Mode Layout Code Is Placed

Layout definition code for inline presentations is placed in a special <view> tag in the <ui> <views> section of the XML configuration file, just like other layout views.  This view is identified as touch content by including <view type="touch"> .  Here is an example inline touch layout definition; it is a simple images-only display:

<ui>
   <views>

      ...other standard layout views for the Flash-based display would be here...

      <view type="touch">
         <ImagesStandardTouch left="0" right="0" top="0" bottom="0" />
      </view>
   </views>
</ui>

Using the Built-In Elements

Several built-in elements provide the basic building blocks for creating an inline touch slideshow.  Note: All elements (except for pre-built control bars) can use the following standard attributes:

  • Standard CSS absolute-positioning properties (left, right, top, bottom, width, height, minWidth, minHeight, maxWidth, maxHeight)
  • Custom CSS style properties via the style attribute (using the same format as any standard HTML element's style property)
  • Custom CSS classes via the class attribute.  Note that this can be used to add class="toggleElement" to (in combination with toggleid) create toggleable elements; for more information, see the bottom of this topic.
  • toggleid which can be used in combination with class="toggleElement" to create toggleable elements.  For more information, see the bottom of this topic.
  • When creating a toggleable element, toggleState="true" or toggleState="false" can be specified to explicitly set the initial visibility of the element.

The available built-in elements are summarized below.  Note that all touch-only elements are suffixed with -Touch for clarity.

--- Main Slideshow Elements ---

<ImagesStandardTouch>

An image display.  Shows the photos one at a time, using a fade transition.  This image display is best for optimizing performance.  Available attributes:  [Important Note: In full-screen mode, these parameters can be set via the ImagesStandardTouch selector in the <styles> section as well.]

Attribute Values Description
alwaysClosePreviousGallery Boolean true or false

If enabled, whenever switching between galleries the last-viewed photo will be removed as soon as that new gallery opens - even if the first photo in the next gallery hasn't yet been loaded.  If disabled (the default), the last-viewed photo in the old gallery will remain visible until it fades out and the new gallery's first photo fades in.

Default is false

fadeSpeed Numeric value in milliseconds

Specifies the speed of the fade effect.

The default value is 1200 (1.2 seconds).

 

<ImagesSwipeTouch>

An image display.  Shows all photos in a gallery in a continuous row that scrolls right and left.  Generally it is better to use the ImagesStandardTouch display instead for inline presentations.  Available attributes:  [Important Note: In full-screen mode, these parameters can be set via the ImagesSwipeTouch selector in the <styles> section as well.]

Attribute Values Description
preventFlicker auto, true or false (default)

Can be used to apply a special CSS parameter (a 0,0,0 3D transformation for those interested) to each slide, in order to prevent the "flickering" effect when swipe-scrolling to images that haven't yet been viewed.  The unfortunate side-effect of enabling this setting is that it may cause Mobile Safari to crash on galleries with a large number of images (e.g. >20) when device orientation is changed.  In testing, this occurred on the iPad running iOS 3.2 regularly, and very occasionally on iOS 4.1 on the iPhone.

Because of this nasty unpredictable side-effect, the setting is disabled (false) by default.  On a per-case basis with testing, it may be enabled for better user experience - especially for smaller galleries.

Using the auto value enables the setting for all galleries with a fewer than 15 photos.  Using true enables the value for all galleries, regardless of the number of photos.

allowSwipe Boolean true or false

Specifies whether the user may switch from photo to photo by brushing left or right.

Default is true

 

 

[Built-in IndividualSlide element]

Both of the image displays use the built-in IndividualSlide element.  Usually, no customization of this element is necessary.  However, several CSS selectors are available for more advanced customization - for example, adding a CSS reflection effect to each slide.  Custom CSS definitions may be placed inside a <RawCSS> element, using the following CSS selectors.

Selector Description
.xfs4t_slideDisplay Represents any image-display element (e.g. ImagesStandardTouch or ImagesSwipeTouch).  If adding an effect such as a border or drop-shadow to the slides, overflow: visible !important; will be needed to be defined for this selector.
.xfs4t_slideWrap Represents the main wrapper element for each slide.  If adding an effect such as a border or drop-shadow to the slides, overflow: visible !important; will be needed to be defined for this selector.
.xfs4t_photo Represents each slide image.  This is the selector where any border, shadow or reflection effect would be added.
.xfs4t_video Represents each slide video if video is used in a slideshow.

 

 

<ThumbnailsTouch>

Displays the thumbnails of each of the slides in the gallery, letting the user jump to a slide by tapping on it.  The useArrows attribute controls whether arrow buttons should be shown on the ends; the enableTouch attribute controls whether the user can scroll through the thumbnails by swiping with his/her finger.  Available attributes:

Attribute Values Description
backgroundColor Hex color, e.g. #000000

Specifies the background color used for the element.

Default is #000000 (black)

backgroundAlpha Numeric value 0 (transparent) to 1 (opaque).

Specifies the opacity of the background color used for the element.

Default is 0.6

enableTouch Boolean true or false

Specifies if touch scrolling via a finger swipe is enabled.

Default is true

showArrows Boolean true or false

Specifies if arrow buttons should be displayed on the ends of the control for scrolling.

Default is false

arrowColor Hex color, e.g. #FFFFFF

Specifies the color of the arrow icons on the arrow buttons if showArrows is enabled.

Default is #FFFFFF (white)

arrowSize Numeric value (in pixels)

Specifies the size, in pixels, of the arrow icons on the arrow buttons if showArrows is enabled.

Default is 8

arrowPadding Numeric value (in pixels)

Specifies the padding, in pixels, on each side of the arrow buttons if showArrows is enabled.

Default is 20

arrowThickness Numeric value (in pixels)

Specifies the thickness, in pixels, of the arrow icons on the arrow buttons in showArrows is eanbled.

Default is 2

tileWidth Numeric value (in pixels)

Specifies the width of each of the thumbnails.  Based on the specified value, the maximum number of tiles will be fit in the available width.

Default is 70

tileHeight Numeric value (in pixels)

Specifies the height of each of the thumbnails.  Based on the specified value, the maximum number of tiles will be fit in the available height.

Default is 70

spacing Numeric value (in pixels)

Specifies the spacing, in pixels, between each of the thumbnail tiles.

Default is 10

addFloater Boolean true or false

If enabled, a div with the class of xf4t_thumb_floater will be positioned behind each thumbnail.  This can be used to display a background image or other decoration.  See below for more information about CSS selectors available for additional customization.

Default is false

disableAutoplayOnClick Boolean true or false

Specifies if autoplay should be stopped when a thumbnail is selected.

Default is true

 

For even more control, custom CSS definitions may be used to customize the appearance of the thumbnails element or individual thumbnails.  Custom CSS definitions may be placed inside a <RawCSS> element, using the following CSS selectors.  On the holder-related selectors (the first three in the table below), the !important directive must be applied to most properties in order to override the default inline values.

Selector Description
.xfs4t_thumbOuterHolder The outer container (the part of the element excluding the arrow buttons).
.xfs4t_thumbHolder The inner container (the part of the element that scrolls).
.xfs4t_thumb Controls the appearance of each thumbnail in its standard state.  Can be used to apply borders, shadows, or even resizing transformations via -webkit-transform.  Transitions are supported via -webkit-transform.
body .xfs4t_thumb_selected Controls the appearance of each thumbnail in its selected state.  Note the use of body on the selector to ensure that the standard-state styles are overridden.
.xfs4t_thumb_visited Controls the appearance of thumbs of already-viewed slides.
.xfs4t_thumb_floater If the addFloater property is enabled (see above for more information), this selector offers control over the floater.  Note that only the positioning is applied to the floater elements by default; no dimensions are applied.
.xfs4t_thumb_floater_selected Represents the floater for the selected thumb.
.xfs4t_thumb_floater_visited Represents floaters for thumbs of slides that have been viewed.

 

[Built-in GallerySelectorTouch element]

In both the inline and fs (fullscreen) touch modes, a built-in gallery selector is created that overlays the entire slideshow when opened.  Two parameters, type and restartAutoplay, can be specified via the <style> section parameters using the GallerySelectorTouch selector; see the other page for more information about those parameters.

Most properties of the element, however, are controlled via custom CSS definitions for the selectors detailed in the following table.  Custom CSS definitions may be added to the layout via the <RawCSS> element.  Note that all selectors are prefixed with body in order to override the default selectors.  Note: To ensure a given property is applied, it may be necessary to add the !important directive.

Selector Description
body .xfs4t_gs Represents the overall selector element.  Background color can be customized.
body .xfs4t_gs td Represents each cell in the selector table; this is where default font-family definitions should be placed.
body .xfs4t_gs_i Represents each item in the text-type selector.  Margin, padding and border values should be placed here.
body .xfs4t_gs_i .leftSide Represents the left part of a text-type selector item.  This is where padding-right definitions are placed to control the spacing between the thumbnail and the title/description text.
body .xfs4t_gs_ii Represents each item in the image-type selector.  Margin, padding and border values should be placed here.
body .xfs4t_gs_ii img Represents the image in an image-type selector item.  This is where any image sizing properties can be specified.
body .xfs4t_gs_iS Represents a selected text-type selector item (the item for the currently-selected gallery).  Background or border properties can be specified here.
body .xfs4t_gs_iiS Represents a selected image-type selector item (the item for the currently-selected gallery).  Border properties can be specified here.
body .xfs4t_gs_i_t Represents the title text in a text-type selector item.  Can be used to override font size or weight settings (thereby differentiating gallery title text from description text).

 

<TopControlBarTouch>

Creates a control bar that floats at the top of the slideshow centered horizontally, just like the same in a full-screen touch mode presentation.  The buttons on the control bar can be customized by specifying the buttons parameter detailed just below.  Available attributes:

Attribute Values Description
buttons See description

Specifies which control items are included in the control bar.  The following values are supported:

  • play - Creates a play/pause button
  • gallery - Creates a button that opens the gallery selector
  • caption - Creates a button that toggles the <CaptionTouch> element (if defined), or any toggleable element [see below] with toggleid="caption"
  • thumbs - Creates a button that toggles the <Thumbnails> element (if defined), or any toggleable element [see below] with toggleid="thumbs"

Button ID's are provided in a comma-delimited list.  Thus, the default value (which includes three of the four buttons) is:

play,gallery,caption

If, for example, only a play/pause button and a caption toggle button were desired, the following value would be used: play,caption

 

<EdgeArrowsTouch>

Creates left and right arrow buttons that float on the left and right edges of the slideshow, allowing the user to jump to the previous or next button.  These buttons are the same ones used in fs (full-screen) touch-mode presentations.  The advanced <style> section settings available for the PreviousButtonTouch and NextButtonTouch selectors apply to these buttons; learn more about these settings here.

<CaptionTouch>

Displays a box with the image title and/or caption text (if specified).  Can be toggled by the <CaptionToggleButtonTouch> element.  Available attributes:

(Only the standard common attributes mentioned at the top of this section)

If control is needed over the individual text elements (the title and caption), either use the <DynamicTextTouch> element or define custom CSS using the <RawCSS> element and the following CSS selectors.  Important: Because these selectors are used to override inline styles, the !important directive must be applied to all property definitions.

Selector Description
.xfs4t_caption Controls the overall title/caption container.  Font, background and color properties can all be specified.
.xfs4t_caption_title Controls the title text's appearance.  Padding and font/color properties can be specified.
.xfs4t_caption_caption Controls the caption text's appearance.  Padding and font/color properties can be specified.

 

<DotBarTouch>

Displays a row of 'dots', each of which represent one slide in the current gallery.  This type of control is commonly used in image rotators.  By default, each dot has no text; however, it can be customized to include the number of the slide (1, 2, 3, etc), just like the NumberBar element in the Flash-based player.  Available attributes:

Attribute Values Description
size Numeric value (in pixels)

Specifies the default size of each of the dots (the value can still be overridden with custom CSS declarations - see below).

Default is 20

spacing Numeric value (in pixels)

Specifies the default spacing between each of the dots (the value can still be overridden with custom CSS declarations - see below).

Default is 10

color Hex color, e.g. #FFFFFF

Specifies the default color of the dots (the value can still be overridden with custom CSS declarations - see below).

Default is #FFFFFF

disableAutoplayOnClick Boolean true or false

Specifies if autoplay should be stopped when a button/dot is selected.

Defaults is true

 

For even more control, custom CSS definitions may be used to customize the appearance of the dotbar element or individual dots.  Custom CSS definitions may be placed inside a <RawCSS> element, using the following CSS selectors.

Selector Description
body .xfs4t_dotbar_i

Controls the appearance of each dot in its standard state.  Can be used to apply sizing (via width and height), background, borders, shadows, or even resizing transformations via -webkit-transform.  Transitions are supported via -webkit-transform.  If rounding is desired, use -webkit-border-radius, not the generic border-radius property.

If you wish to have the number text on each button visible (e.g. 1, 2, 3, etc), the following properties must be overridden in addition to setting the padding/alignment and font-family:

  • color must be set (the default is transparent)
  • line-height must be set (the default is 0)
  • font-size must be set (the default is 0)

Note the use of body on the selector to ensure that the default styles are overridden.

body div .xfs4t_dotbar_iS Controls the appearance of each dot in its selected state.  Note the use of body div on the selector to ensure that the standard-state styles are overridden.
body .xfs4t_dotbar_iV Controls the appearance of dots representing already-viewed slides. 

<GalleryBarTouch>

Similar to the GalleryBar element in the Flash-based player, this element displays a bar containing a button for each gallery in the slideshow.  Each button's label is the title of the corresponding gallery.  Tapping on one of the buttons opens that corresponding gallery.  Available attributes:

Attribute Values Description
backgroundColor Hex color, e.g. #000000

Specifies the background color displayed on the bar.

Defaults to #000000 (black)

backgroundAlpha Numeric value, 0 (transparent) to 1 (opaque)

Specifies the opacity of the background color displayed on the bar.

Defaults to 0.8

color Hex color, e.g. #FFFFFF

Specifies the color of the labels on each button.

Defaults to #FFFFFF (white)

restartAutoplay Boolean true or false

Specifies whether autoplay should automatically be re-enabled when a new gallery selection is made.

Defaults to true

 

For even more control, custom CSS definitions may be used to customize the appearance of the overall element or individual buttons.  Custom CSS definitions may be placed inside a <RawCSS> element, using the following CSS selectors.

Selector Description
.xfs4t_gb The main element.
body .xfs4t_gb_i

Controls the appearance of each button in its standard state.  Can be used to apply colors or text formatting.

Note the use of body on the selector to ensure that the default styles are overridden.

body div .xfs4t_gb_iS Controls the appearance of the button that represents the currently-open gallery.  Note the use of body div on the selector to ensure that the standard-state and default styles are overridden.
body .xfs4t_gb_iV Controls the appearance of buttons representing already-viewed galleries.

 

<DynamicTextTouch>

This element, which corresponds to the DynamicText or DynamicScrollableText element in the Flash-based player, can be used to display text with information about the currently-open gallery and/or image.  The text attribute is the most important one, as it specifies the text to display.  Available attributes:

Attribute Values Description
text Text value (see description)

Specifies the text displayed.  This text can include replacement values -- special strings like {image.title} or {image.caption} that are translated into image- or gallery-specific information.  To learn more about the supported replacement text values, see the documentation for the DynamicText element.

There is no default value; this attribute is required.

initText Text value (see description) Specifies the text displayed until the first gallery is opened.  By default this value is an empty string, which causes the element to be hidden until the first gallery appears.  This parameter can be explicitly specified to control what initially appears.
hideWhenEmpty Boolean true or false

Specifies if the element should automatically hide itself if the specified hideWhenEmptyValue evalulates to an empty string.

Default value is true, which means that the element automatically hides itself whenever its text value is empty.

hideWhenEmptyValue Text value (see description) See hideWhenEmpty; specifies the text value to be evaluated when testing for whether the element should hide itself.
fontFamily Font name

Specifies the font used for the text

fontSize Font size Specifies the size of the font used for the text
fontWeight normal (default) or bold Specifies the weight of the text
fontStyle normal (default) or italic Specifies whether the text is italicized
textDecoration none (default) or underline Specifies if the text should be underlined
color Hex color (e.g. #FF0000)

Specifies the color of the text.

Default is #FFFFFF (white)

textAlign left (default), center or right Specifies the alignment of the text.

 

 

--- Control Buttons ---

<PreviousButtonTouch>

Creates a button that makes the slideshow jump to the previous slide.  Available attributes:

Attribute Values Description
image Path to image file Specifies the enabled-state image for the button.  If omitted, defaults to the built-in arrow image.
image2 Path to image file Specifies the disabled-state image for the button (displayed when at the first photo in a gallery).  If omitted, defaults to the built-in arrow image.

 

Note: There are advanced <style> section settings available for the PreviousButtonTouch and NextButtonTouch selectors, which apply to these buttons; learn more about these settings here.

<NextButtonTouch>

Creates a button that makes the slideshow jump to the next slide.  Available attributes:

Attribute Values Description
image Path to image file Specifies the enabled-state image for the button.  If omitted, defaults to the built-in arrow image.
image2 Path to image file Specifies the disabled-state image for the button (displayed when at the final photo in a gallery).  If omitted, defaults to the built-in arrow image.

 

Note: There are advanced <style> section settings available for the PreviousButtonTouch and NextButtonTouch selectors, which apply to these buttons; learn more about these settings here.

<PlayPauseButtonTouch>

Creates a button that toggles autoplay for the slideshow.  Available attributes:

Attribute Values Description
image Path to image file Specifies the "play" image for the button (displayed when autoplay is currently disabled).  If omitted, defaults to the built-in "play" icon.
image2 Path to image file Specifies the "pause" image for the button (displayed when autoplay is currently enabled).  If omitted, defaults to the built-in "pause" icon.

 

<SelectGalleryButtonTouch>

Creates a button that opens the built-in GallerySelectorTouch element (the gallery selector that overlays the entire slideshow).  Available attributes:

Attribute Values Description
image Path to image file Specifies the image to use for the button.  If omitted, defaults to the built-in gallery-selector image.

 

<CaptionToggleButtonTouch>

Creates a button that toggles the <CaptionTouch> element (if included in the layout), or any other toggleable element with toggleid="caption".  Available attributes:

Attribute Values Description
image Path to image file Specifies the visible-state image for the button; this is what's displayed when the caption is visible.  If omitted, defaults to the built-in caption-visible icon.
image2 Path to image file Specifies the hidden-state image for the button; this is what's displayed when the caption is hidden.  If omitted, defaults to the built-in caption-hidden icon.

 

<ThumbToggleButtonTouch>

Creates a button that toggles the <ThumbnailsTouch> element (if included in the layout), or any other toggleable element with toggleid="thumbs".  Available attributes:

Attribute Values Description
image Path to image file Specifies the visible-state image for the button; this is what's displayed when the ThumbnailsTouch element is visible.  If omitted, defaults to the built-in thumbs-visible icon.
image2 Path to image file Specifies the hidden-state image for the button; this is what's displayed when the ThumbnailsTouch element is hidden.  If omitted, defaults to the built-in thumbs-hidden icon.

<GenericElementToggleButtonTouch>

Creates a button that toggles any toggleable element with the same toggleid as that specified on the button.  Available attributes:

Attribute Values Description
toggleid A toggle ID value that matches the toggleid specified on the element(s) you want to toggle Any toggleable element with the same toggleid as this button will be toggled (hidden/shown) when the button is clicked.
image Path to image file Specifies the visible-state image for the button; this is what's displayed when the corresponding toggleable element(s) are visible.  If omitted, defaults to a built-in icon.
image2 Path to image file Specifies the hidden-state image for the button; this is what's displayed when the corresponding toggleable element(s) are hidden.  If omitted, defaults to a built-in icon.

Adding Custom HTML and CSS Content

For a higher level of control, custom HTML and CSS content can be added to a layout via the <RawHTML> and <RawCSS> elements.  All elements defined inside RawHTML tags should use absolute positioning.  All coordinates are relative to the designated slideshow area.  For example:

<RawHTML encoded="false"><div style="position: absolute; left: 100px; top: 100px; width: 150px; height: 70px; background-color: #F00; color: #FFF;">Special Static Text</div></RawHTML>

If encoded="false" is set, the inner contents must be well-formatted XHTML.  Otherwise, all HTML entities the contents must be encoded -- e.g. < becomes &lt; and > becomes &gt; and " becomes &quot;     If you're working with the wizard, the contents will be encoded.  If you're manually editing the code, it will probably be easiest to use encoded="false"

The RawCSS element can be used to apply custom CSS styles to elements in the touch UI.  For most class selectors, prepend body to the selector to ensure that the rule take precedence over any default rule.  Here is an example RawCSS element:

<RawCSS>
body .xfs4t_thumb { border: 2px solid #FFF; }
</RawCSS>

In addition to generic HTML content such as static images, backgrounds, etc, there are several special dynamic elements that can be used.

Toggleable Elements

To make an element toggleable, the toggleElement class must be applied to that element.  Additionally, a toggleid attribute must be specified - this will be used later on the corresponding toggle control button.  If the toggleable element should initially be hidden, also apply the toggleState="false" attribute.  Here is an example of a toggleable element that is initially hidden:

<div class="toggleElement" style="position: absolute; left: 0; right: 0; bottom: 0;" toggleid="someID" toggleState="false">Some toggleable content</div>

To create a control button that toggles a toggleable element, create a div with the following format:

<div class="toggleButton" toggleid="someID" toggleImageVisible="path/to/image.jpg" toggleImageHidden="path/to/image2.jpg">
   <img class="toggleImage" />
</div>

The toggleButton class indicates the element is a toggle control button.  The toggleid attribute indicates what elements the button should control (corresponding to the toggleid on any toggleable element[s]).  The toggleImageVisible attribute indicates the button image when the corresponding element is visible; the toggleImageHidden attribute indicates the button image when the corresponding element is hidden.

The toggleid values of two common elements are caption (for the built-in CaptionTouch element), and thumbs (for the built-in ThumbnailsTouch element).

Control Elements

Custom control elements can be created to control several options of a slideshow.  Each type of control button is identified by a uniqud controlid.  The images to use for these custom buttons may be specified via the controlImage and controlImage2 attributes.  The following table summarizes the available control items:

Control Type Associated controlid controlImage significance controlImage2 significance
Button that jumps to the previous photo previousButton The "previous photo" button image (for when the button is enabled) The image to use when the button is disabled (e.g. at the first photo)
Button that jumps to the next photo nextButton The "next photo" button image (for when the button is enabled) The image to use when the button is disabled (e.g. at the last photo)
Enables or disables autoplay for a slideshow playPauseButton The "play" image for the button The "pause" image for the button
Opens the gallery selection screen selectGalleryButton The "select gallery" image for the button N/A

 

To construct one of these buttons, create a <div> of the following format:

<div class="controlButton" controlid="playPauseButton" controlImage="path/to/play_button.png" controlImage2="path/to/pause_button.png"><img class="controlImage" style="position: absolute;"></div>

The class and controlid must be specified.  If controlImage or controlImage2 is omitted, the default icons will be used.  The controlImage class must be applied to either a child <img> element, the controlButton <div> itself, or a child <div>.  If it is applied to an <img> element, the image's src will be modified.  If it is applied to a <div>, the div's background image will be modified to display the appropriate button image.

Dynamic Text

Dynamic text allows information about the current gallery or image to be displayed.  This is often used to display image title or caption information.  For more information about supported replacement values, see the main documentation.  The replacement values supported in touch presentations are the same as those supported in Flash presentations.

To use dynamic text, create an element (usually <p> or <div>) with the dynamicText class applied.  The text inside the element is what will be dynamically updated.  Here's an example element that displays the current caption:

<p class="dynamicText" style="position: absolute;">{image.caption}</p>

Additional attributes may optionally be used on the element for greater control:

Attribute Description
dynamicText_init Specifies what code should be displayed prior to the first update to the text.  Can be a blank space, e.g. dynamicText_init=" "
dynamicText_hideWhenEmpty Boolean value (true [default] or false); specifies whether the element should be automatically hidden when the specified dynamic text evaluates to an empty string.
dynamicText_hideWhenEmptyValue If dynamicText_hideWhenEmpty is enabled, this attribute can be specified to explicitly define what dynamic string should be evaluated when testing for "emptiness".