スウォッチ swatches
スウォッチは、左側と右側にオプションのスクロールボタンを備えたサムネイル画像の行で構成されます。 スクロール ボタンは、すべてのサムネールがコンテナの幅に収まらない場合にのみ、デスクトップに表示されます。 モバイルデバイスでは、サムネールがコンテナ幅に収まる場合、スクロールボタンは表示されません。
.s7zoomviewer .s7swatches
メイン ビューア領域のCSS プロパティ
スウォッチコンテナの外観は、次のCSS クラスセレクターで制御されます。
.s7zoomviewer .s7zoomresetbutton
例 – スウォッチを460 x 100 ピクセルに設定します。
.s7zoomviewer .s7swatches {
width: 460px;
height: 100px;
}
スウォッチのサムネール間の間隔は、次のCSS クラスセレクターで制御されます。
.s7zoomviewer .s7swatches .s7thumbcell
例
垂直方向および水平方向の間隔を10 ピクセルに設定する。
.s7zoomviewer .s7swatches .s7thumbcell {
margin: 5px;
}
個々のサムネールの外観は、次のCSS クラスセレクターで制御されます。
.s7zoomviewer .s7swatches .s7thumb
state属性セレクターをサポートしています。このセレクターを使用すると、異なるサムネール状態に異なるスキンを適用できます。 特に、state="selected"は現在メインビューに表示されている画像のサムネールに対応し、state="default"は残りのサムネールに対応し、state="over"はマウスオーバーで使用されます。例 – 56 x 56 ピクセルのサムネールを設定するには、明るいグレーのデフォルトの境界線と、濃いグレーの選択した境界線があります。
.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;
}
左右のスクロールボタンの外観は、次のCSS クラスセレクターで制御されます。
.s7zoomviewer .s7swatches .s7scrollleftbutton
.s7zoomviewer .s7swatches .s7scrollrightbutton
CSSの上部、左、下部、右のプロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアリジックによって自動的に配置されます。
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトを参照してください。
state属性セレクターをサポートしています。このセレクターを使用すると、異なるスキンを異なるボタンの状態（up、down、over、およびdisabled）に適用できます。ボタンツールのヒントはローカライズできます。 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 – 56 x 56 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定します。
.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);
}