メインスウォッチ 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
プロパティ。 代わりに、ビューアのロジックによって自動的に配置されます。
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
詳しくは、 CSS スプライト.
state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。 up
, down
, over
、および disabled
.ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 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);
}