Element: Image / Gallery

The Image Gallery element can include one or more images. Two display types can be chosen for visualization. The element contains a sub-element "Title panel" for each image, which uses the styles from the element Headline / Label.

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)

  • Border
    Height
    Contentdock image 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 image 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 image 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

  • Image element behavior
    Presentation
    Contentdock image presenatation help
    Defines the general representation of the Image Gallery.

    Possible representations are:

    Single-image: There is always only one image visible. Depending on the style "scroll direction" the next image will displayed accordingly.

    Magazine Style: All defined images are displayed in columns inside the element (see style "Number of columns").

    Preset system value

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

    normal

    Scroll direction
    Contentdock image swip direction help
    For single-image view only

    Defines the scroll direction.

    Possible values are:

    Horizontal: The scroll direction is horizontal.

    Vertical: The scroll direction is vertical.

    The scrolling itself is with the typical tablet finger gestures (swipe to left, to right, up or down).

    Preset system value

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

    horizontal

    Scroll icon left
    Contentdock image swip image left help
    Only for single-image view and the scroll direction is "horizontal".

    This will show an image (eg: arrow) "vertical centered to the left" as help icon for the user.

    When the help icon on the tablet is touched, the image switches automatically to the next.
    Distance from the left to the left scroll icon
    Contentdock image swip image distance left help
    Only for single-image view and the scroll direction is "horizontal" and the scroll icon position is "at the left".

    Defines the distance in pixels from the left edge of the element to the scroll icon "on the left".

    Preset system value

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

    5

    Scroll icon right
    Contentdock image swip image right help
    Only for single-image view and the scroll direction is "horizontal".

    This will show an image (eg: arrow) "vertical centered to the right" as help icon for the user.

    When the help icon on the tablet are touched, the image switches automatically to the next.
    Distance from the right to the right scroll icon
    Contentdock image swip image distance right help
    Only for single-image view and the scroll direction is "horizontal" and the scroll icon position is "at the right".

    Defines the distance in pixels from the right edge of the element to the scroll icon "on the right".

    Preset system value

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

    5

    Scroll icon top
    Contentdock image swip image top help
    Only for single-image view and the scroll direction is "vertical".

    This will show an image (eg: arrow) "horizontal centered to the top" as help icon for the user.

    When the help icon on the tablet are touched, the image switches automatically to the next.
    Distance from the top to the left scroll icon
    Contentdock image swip image distance top help
    Only for single-image view and the scroll direction is "vertical" and the scroll icon position is "at the top".

    Defines the distance in pixels from the top edge of the element to the scroll icon "at the top".
    Scroll icon bottom
    Contentdock image swip image bottom help
    Only for single-image view and the scroll direction is "vertical".

    This will show an image (eg: arrow) "horizontal centered to the bottom" as help icon for the user.

    When the help icon on the tablet are touched, the image switches automatically to the next.
    Distance from the bottom to the bottom scroll icon
    Contentdock image swip image distance bottom help
    Only for single-image view and the scroll direction is "vertical" and the scroll icon position is "at the bottom".

    Defines the distance in pixels from the bottom edge of the element to the scroll icon "at the bottom".
    Number of columns
    Contentdock image magazine cols help
    Magazine view only

    Defines the number of columns in which the images are displayed in the element.
    Horizontal distance between images
    Contentdock image magazine col distance help
    Magazine view only

    Defines the horizontally spacing between the images.
    Distance vertical between images
    Contentdock image magazine row distance help
    Magazine view only

    Defines the vertically spacing between the images.
  • Fullscreen
    Show image full screen on finger tap
    Contentdock image activate full image help
    This activates the full-screen-view of the image when the user touches the image.

    Preset system value

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

    0

    Icon
    Contentdock image symbol full image help
    For single-image view only

    Defines an image / icon (such as a loupe) to let the user know that the full-screen-view is enabled.
    Icon position
    Contentdock image symbol full image position help
    For single-image view only

    Defines the position of the icon for the full-screen-view of the image.

    Possible values are:

    top left: Display of the icon on the top left corner of the element

    top right: Display of the icon on the top right corner of the element.

    bottom left: Display of the icon at the bottom left corner of the element.

    bottom right: Display of the icon at the bottom right corner of the element.

    centered: Display of the icon centered in the element.

    Preset system value

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

    center

    Distance icon from the bottom
    Contentdock image symbol full image distance bottom help
    For single-image view only and the full-screen-icon is "bottom left/right"

    Specifies the distance between the full screen icon and the bottom edge of the element.
    Distance icon from the top
    Contentdock image symbol full image distance top help
    For single-image view only and the full-screen-icon is "top left/right"

    Specifies the distance between the full screen icon and the top edge of the element.
    Distance icon from the left
    Contentdock image symbol full image distance left help
    For single-image view only and the full-screen-icon is "top / bottom left"

    Specifies the distance between the full screen icon and the left edge of the element.
    Distance icon from the right
    Contentdock image symbol full image distance right help
    For single-image view only and the full-screen-icon is "top / bottom right"

    Specifies the distance between the full screen icon and the right edge of the element.
    Background Color in Fullscreen mode
    Contentdock image bg color full image help
    When opening the full screen mode, an additional color layer is displayed across the entire screen. Defined here the color for it.