Hauptfelder bestehen aus einer Reihe von Miniaturbildern mit optionalen Bildlaufschaltflächen auf der linken und rechten Seite. Bildlaufschaltflächen sind nur dann auf dem Desktop sichtbar, wenn alle Miniaturansichten nicht in die Breite des Containers passen. Auf Mobilgeräten oder, wenn Miniaturansichten in die Breite des Containers passen, werden keine Bildlaufschaltflächen angezeigt.
Das Erscheinungsbild des Containers "swatches"wird mithilfe der CSS-Klassenauswahl gesteuert:
.s7mixedmediaviewer .s7swatches
CSS-Eigenschaften der Muster
height |
Die Höhe der Farbfelder. |
unten |
Die vertikalen Farbfelder versetzen sich relativ zum Viewer-Container. |
Beispiel: Zum Einrichten von Farbfeldern mit einer Höhe von 100 Pixel.
.s7mixedmediviewer .s7swatches {
height: 100px;
}
Der Abstand zwischen den Musterminiaturen wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7mixedmediaviewer .s7swatches .s7thumbcell
CSS-Eigenschaft |
Beschreibung |
---|---|
margin |
Die Größe des horizontalen und vertikalen Randes um die einzelnen Miniaturansichten. Der tatsächliche Abstand der Miniaturansichten entspricht der Summe des linken und rechten Randes, der für .s7thumbcell festgelegt wurde. |
Beispiel
So legen Sie den Abstand sowohl vertikal als auch horizontal auf 10 Pixel fest.
.s7mixedmediaviewer .s7swatches .s7thumbcell {
margin: 5px;
}
Das Erscheinungsbild der einzelnen Miniaturansicht wird mithilfe der folgenden CSS-Klassenauswahl gesteuert:
.s7mixedmediaviewer .s7swatches .s7thumb
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Breite der Miniaturansicht. |
height |
Höhe der Miniaturansicht. |
rand |
Rand der Miniaturansicht. |
Die Miniaturansicht unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Miniaturansichten angewendet werden können. Insbesondere entspricht state="selected"
der Miniaturansicht für das Bild, das derzeit in der Haupt-Ansicht angezeigt wird, state="default"
dem Rest der Miniaturansichten entspricht und state="over"
beim Bewegen der Maus verwendet wird.
Beispiel: Zum Einrichten von Miniaturbildern mit 56 x 56 Pixel, einem hellgrauen Standardrand und einem dunkelgrauen ausgewählten Rand.
.s7mixedmediaviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7mixedviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
Der Asset-Typ wird als Symbol über dem Miniaturbild angezeigt und mit der folgenden CSS-Klassenauswahl gesteuert:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Breite der Symbolüberlagerung. |
height |
Höhe der Symbolüberlagerung. |
Die Überlagerung unterstützt die Attributauswahl type
mit den folgenden möglichen Werten: image
(für einzelne Bilder), swatchset
(für Mustersets), spinset
(für Rotationssets) und video
(für einzelne Videos oder adaptive Videosets).
Beispiel: So richten Sie Symbolüberlagerungen für Rotationssets, Mustersets und Videos ein:
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] {
background-image: url(images/v2/ThumbOverlaySwatchSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] {
background-image: url(images/v2/ThumbOverlaySpinSet.png);
}
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] {
background-image: url(images/v2/ThumbOverlayVideo.png);
}
Die Darstellung der Schaltflächen für den linken und rechten Bildlauf wird mit den folgenden CSS-Klassenselektoren gesteuert:
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton
Es ist nicht möglich, Bildlaufschaltflächen mit den Eigenschaften CSS top
, left
, bottom
und right
zu positionieren. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Breite der Bildlaufschaltfläche. |
height |
Höhe der Bildlauftaste. |
background-image |
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Diese Schaltfläche unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können: up
, down
, over
und disabled
.
Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.
Beispiel: Zum Einrichten von Bildlaufschaltflächen mit 56 x 56 Pixeln und unterschiedlicher Grafik für jeden Status.
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}