Muster bestehen aus einer Zeile von Miniaturbildern mit optionalen Bildlauftasten auf der linken und rechten Seite. Bildlauftasten werden nur dann auf dem Desktop angezeigt, wenn alle Miniaturansichten nicht in die Container-Breite passen. Auf Mobilgeräten oder wenn Miniaturansichten in die Container-Breite passen, werden die Bildlauftasten nicht angezeigt.
.s7zoomviewer .s7swatches
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild des Farbmuster-Containers wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7zoomviewer .s7zoomresetbutton
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Breite der Farbfelder. |
height |
Höhe der Farbfelder. |
unten |
Vertikale Farbfelder versetzen sich relativ zum Viewer-Container. |
Beispiel: Zum Einrichten von Farbfeldern auf 460 x 100 Pixel.
.s7zoomviewer .s7swatches {
width: 460px;
height: 100px;
}
Der Abstand zwischen den Musterminiaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7zoomviewer .s7swatches .s7thumbcell
CSS-Eigenschaft |
Beschreibung |
---|---|
margin |
Die Größe des horizontalen und vertikalen Rands um jede Miniaturansicht. Der tatsächliche Abstand der Miniaturansichten entspricht der Summe des linken und rechten Rands, der für .s7thumbcell . |
Beispiel
So legen Sie den Abstand sowohl vertikal als auch horizontal auf zehn Pixel fest.
.s7zoomviewer .s7swatches .s7thumbcell {
margin: 5px;
}
Das Erscheinungsbild der einzelnen Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7zoomviewer .s7swatches .s7thumb
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Breite der Miniaturansicht. |
height |
Höhe der Miniaturansicht. |
rand |
Rand der Miniaturansicht. |
Miniaturansichten unterstützen die state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Miniaturansichten anzuwenden. Insbesondere state="selected"
entspricht der Miniaturansicht für das Bild, das derzeit in der Hauptansicht angezeigt wird, state="default"
dem Rest der Miniaturansichten entspricht und state="over"
wird beim Bewegen der Maus verwendet.
Beispiel: Zum Einrichten von Miniaturansichten mit 56 x 56 Pixel, einem hellgrauen Standardrahmen und einem dunkelgrauen ausgewählten Rahmen.
.s7zoomviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7zoomviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
Das Erscheinungsbild der linken und rechten Bildlaufschaltflächen wird mit den folgenden CSS-Klassenselektoren gesteuert:
.s7zoomviewer .s7swatches .s7scrollleftbutton
.s7zoomviewer .s7swatches .s7scrollrightbutton
Es ist nicht möglich, Bildlaufschaltflächen mithilfe der CSS-Eigenschaften oben, links, unten und rechts zu positionieren. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Breite der Bildlaufschaltfläche. |
height |
Höhe der Bildlaufschaltfläche. |
background-image |
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Diese Schaltfläche unterstützt state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden: up
, down
, over
und disabled
.
Die QuickInfos für Schaltflächen können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche.
Beispiel: Zum Einrichten von Bildlaufschaltflächen mit einer Größe von 56 x 56 Pixel und einer für jeden Status unterschiedlichen Grafik.
.s7zoomviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7zoomviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}