Element: Image / Gallery

Das Element Image Gallery kann ein oder mehrere Bilder aufnehmen. Für die Anzeige können zwei Darstellungstypen gewählt werden. Das Element enthält pro Bild ein Sub-Element "Title panel", welches die Styles vom Element Headline / Label verwendet.

Beispiel App

Sie können dieses Element mit Beispiel-Styles direkt im öffentlichen Bereich der contentDock® Viewer App testen. Zusätzlich können Sie diese Beispiel-Styles auch aus der Vorlagen-Bibliothek in Ihren Benutzer-Account laden und in Ihr App-Projekt importieren.

Styles

  • Hintergrund
    Farbe
    Contentdock color help
    Definiert die Farbe für den Hintergrund des Elements. Die Farbe wird in der kompletten Größe des Elements verwendet. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(255,255,255,0)

  • Rahmen
    Höhe
    Contentdock image border height help
    Definiert die Stärke des Rahmens in Pixel, der das Element umschließt. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Radius
    Contentdock image border radius help
    Definiert den Radius des Rahmens in Pixel, der in den Element-Ecken verwendet wird. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Farbe
    Contentdock color help
    Definiert die Farbe für den Rahmen des Elements. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(255,255,255,0)

    Position
    Contentdock image border position help
    Hiermit geben Sie die Position des Rahmens an. Der Rahmen umschließt immer das Element, allerdings können Sie wählen in welche Richtung der Rahmen gezeichnet wird.

    Mögliche Werte sind:

    Innen: Der Rahmen wird nach innen gezeichnet.

    Außen: Der Rahmen wird nach außen gezeichnet.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    inner

  • Bildelement-Verhalten
    Darstellung
    Contentdock image presenatation help
    Definiert die generelle Darstellung der Bilder-Gallery.

    Mögliche Darstellungen sind:

    Einzelbild: Es ist immer nur ein Bild im Element sichtbar und es kann abhängig vom Style "Scroll-Richtung" das nächste Bild angezeigt werden.

    Magazine Style: Es werden alle definierten Bilder in Spalten (siehe Style "Anzahl Spalten" ) im Element angezeigt.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    normal

    Scroll-Richtung
    Contentdock image swip direction help
    Nur für die Einzelbild-Darstellung

    Definiert die Scroll-Richtung.

    Mögliche Werte sind:

    Horizontal: Die Scroll-Richtung ist horizontal.

    Vertikal: Die Scroll-Richtung ist vertikal.

    Das Scrolling selbst erfolgt auf dem Tablet mit den typischen Finger-Gesten (Wischen nach links, rechts, oben oder unten).

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    horizontal

    Scroll-Symbol links
    Contentdock image swip image left help
    Nur für die Einzelbild-Darstellung und Scroll-Richtung "horizontal".

    Hiermit wird ein Bild (z.B.: Pfeil) "vertikal links zentriert" im Element als Hilfe-Icon dem Nutzer dargestellt.

    Wenn das Bild auf dem Tablet berührt wird, erfolgt ein automatischer Bildwechsel.
    Abstand links zum Scroll-Symbol links
    Contentdock image swip image distance left help
    Nur für die Einzelbild-Darstellung und Scroll-Richtung "horizontal" und Scroll-Symbol "links".

    Definiert den Abstand in Pixel vom linken Rand des Elements zum Scroll-Symbol "links".

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    5

    Scroll-Symbol rechts
    Contentdock image swip image right help
    Nur für die Einzelbild-Darstellung und Scroll-Richtung "horizontal".

    Hiermit wird ein Bild (z.B.: Pfeil) "vertikal rechts zentriert" im Element als Hilfe-Icon dem Nutzer dargestellt.

    Wenn das Bild auf dem Tablet berührt wird, erfolgt ein automatischer Bildwechsel.
    Abstand rechts zum Scroll-Symbol rechts
    Contentdock image swip image distance right help
    Nur für die Einzelbild-Darstellung und Scroll-Richtung "horizontal" und Scroll-Symbol "rechts".

    Definiert den Abstand in Pixel vom rechten Rand des Elements zum Scroll-Symbol "rechts".

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    5

    Scroll-Symbol oben
    Contentdock image swip image top help
    Nur für die Einzelbild-Darstellung und Scroll-Richtung "vertikal".

    Hiermit wird ein Bild (z.B.: Pfeil) "horizontal oben zentriert" im Element als Hilfe-Icon dem Nutzer dargestellt.

    Wenn das Bild auf dem Tablet berührt wird, erfolgt ein automatischer Bildwechsel.
    Abstand oben zum Scroll-Symbol oben
    Contentdock image swip image distance top help
    Nur für die Einzelbild-Darstellung und Scroll-Richtung "vertikal" und Scroll-Symbol "oben".

    Definiert den Abstand in Pixel vom oberen Rand des Elements zum Scroll-Symbol "oben".
    Scroll-Symbol unten
    Contentdock image swip image bottom help
    Nur für die Einzelbild-Darstellung und Scroll-Richtung "vertikal".

    Hiermit wird ein Bild (z.B.: Pfeil) "horizontal unten zentriert" im Element als Hilfe-Icon dem Nutzer dargestellt.

    Wenn das Bild auf dem Tablet berührt wird, erfolgt ein automatischer Bildwechsel.
    Abstand unten zum Scroll-Symbol unten
    Contentdock image swip image distance bottom help
    Nur für die Einzelbild-Darstellung und Scroll-Richtung "vertikal" und Scroll-Symbol "unten".

    Definiert den Abstand in Pixel vom unteren Rand des Elements zum Scroll-Symbol "unten".
    Anzahl Spalten
    Contentdock image magazine cols help
    Nur für die Magazine-Darstellung

    Definiert die Anzahl der Spalten, in der die Bilder im Element angezeigt werden.
    Abstand horizontal zwischen den Bildern
    Contentdock image magazine col distance help
    Nur für die Magazine-Darstellung

    Definiert den Abstand horizontal zwischen den Bildern.
    Abstand vertikal zwischen den Bildern
    Contentdock image magazine row distance help
    Nur für die Magazine-Darstellung

    Definiert den Abstand vertikal zwischen den Bildern.
  • Vollbild
    Zeigen Sie das Bild im Vollbildmodus auf Fingertipp
    Contentdock image activate full image help
    Hiermit wird die vergrößerte Darstellung des Bildes aktiviert, wenn der Nutzer das Bild berührt.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Symbol
    Contentdock image symbol full image help
    Nur für die Einzelbild-Darstellung

    Definiert ein Bild (z.B.: Lupe), damit der Nutzer erkennt, dass der Modus für die vergrößerte Darstellung des Bildes aktiviert ist.
    Symbol-Position
    Contentdock image symbol full image position help
    Nur für die Einzelbild-Darstellung

    Definiert die Position des Symbols für die vergrößerte Darstellung des Bildes.

    Mögliche Werte sind:

    oben links: Darstellung des Symbols in der oberen linken Ecke des Elements.

    oben rechts: Darstellung des Symbols in der oberen rechten Ecke des Elements.

    unten links: Darstellung des Symbols in der unteren linken Ecke des Elements.

    unten rechts: Darstellung des Symbols in der unteren rechten Ecke des Elements.

    zentriert: Darstellung des Symbols zentriert im Element.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    center

    Abstand Symbol von unten
    Contentdock image symbol full image distance bottom help
    Nur für die Einzelbild-Darstellung und Vollbild-Symbol "unten links/rechts"

    Gibt den Abstand zwischen dem Vollbild-Symbol und dem unteren Rand des Elementes an.
    Abstand Symbol von oben
    Contentdock image symbol full image distance top help
    Nur für die Einzelbild-Darstellung und Vollbild-Symbol "oben links/rechts"

    Gibt den Abstand zwischen dem Vollbild-Symbol und dem oberen Rand des Elementes an.
    Abstand Symbol von links
    Contentdock image symbol full image distance left help
    Nur für die Einzelbild-Darstellung und Vollbild-Symbol "links oben/unten"

    Gibt den Abstand zwischen dem Vollbild-Symbol und dem linken Rand des Elementes an.
    Abstand Symbol von rechts
    Contentdock image symbol full image distance right help
    Nur für die Einzelbild-Darstellung und Vollbild-Symbol "rechts oben/unten"

    Gibt den Abstand zwischen dem Vollbild-Symbol und dem rechten Rand des Elementes an.
    Hintergrundfarbe im Vollbildmodus
    Contentdock image bg color full image help
    Beim Öffnen des Vollbildmodus wird ein zusätzlicher Farb-Layer über dem gesamten Bildschirm angezeigt. Hiermit für die Farbe dafür definiert.