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