Element: Thumbnail Gallery

The Thumbnail Gallery is an element that includes for each content item an image / video, text, and link. If the user touches on a thumbnail, this content object is displayed in the element. The Thumbnail Gallery is intended for the top section of a page. You can also use the element at any position in your template.

Structure

The Thumbnail Gallery includes three elements that can be customized in position and size:

  1. Sub-Element "Text", inherits all styles from the element "Simple Text
  2. Sub-Element "Link", inherits all styles from the element "Navigation Button"
  3. Sub-Element "Thumbnail Panel" (styles are on this page)

Content & behavior

The Thumbnail Gallery has a flexible number of content objects. Each content object contains:

  1. An image / video displayed in the whole area of the Thumbnail Gallery. Videos start automatically when the content object is activated.
  2. A thumbnail image, which is displayed in the thumbnail panel.
  3. A text that appears in the "Text" sub-element.
  4. A link that appears in the "Link" sub-element.

Sample App

You can test this element with sample styles directly in the public area of the contentDock® Viewer App. You can also load these sample styles from the Template Library into your user account and import them into your app project.

Styles

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Defines the background image for the element. The image is scaled in the element.
  • Border
    Height
    Contentdock thumbnail gallery border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock thumbnail gallery border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock thumbnail gallery border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    inner

Thumbnail panel

  • Background
    Color
    Contentdock color help
    Defines the color of the thumbnail panel background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Defines the background image for the thumbnail panel element. The image is scaled in the element.
  • Border
    Height
    Contentdock thumbnail panel border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock thumbnail panel border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the thumbnail panel element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock thumbnail panel border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    inner

  • Inner Space
    At the top
    Contentdock thumbnail panel padding top help
    Defines the distance between the top edge of the "Thumbnail Panel" element and the thumbnail image.

    Preset system value

    This value is used if no style is defined for this element.

    0

    At the bottom
    Contentdock thumbnail panel padding bottom help
    Defines the distance between the bottom edge of the "Thumbnail Panel" element and the thumbnail image.

    Preset system value

    This value is used if no style is defined for this element.

    0

    To the left
    Contentdock thumbnail panel padding left help
    Defines the distance between the left edge of the "Thumbnail Panel" element and the thumbnail image.

    Preset system value

    This value is used if no style is defined for this element.

    0

    To the right
    Contentdock thumbnail panel padding right help
    Defines the distance between the right edge of the "Thumbnail Panel" element and the thumbnail image.

    Preset system value

    This value is used if no style is defined for this element.

    0

  • Element
    Scroll direction
    Contentdock thumbnail panel swip direction help
    This defines the scroll direction inside of the thumbnail panel.

    Possible values are:

    Horizontal: The scroll direction is horizontal.

    Vertical: The scroll direction is vertical.

    Preset system value

    This value is used if no style is defined for this element.

    horizontal

    Item distance right
    Contentdock thumbnail panel thumb padding right help
    Only if the scroll direction is "horizontal.

    Defines the distance between the thumbnails on the right edge.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Item distance bottom
    Contentdock thumbnail panel thumb padding bottom help
    Only if the scroll direction is "vertical.

    Defines the distance between the thumbnails of the bottom edge.