サムネール thumbnails

サムネールは、サムネール画像のグリッドで構成され、右側には垂直方向のスクロールを可能にするオプションのスクロールバーがあります。

メインコントロールバーのサムネールボタンをクリックすると、サムネールが切り替わります。 サムネールがアクティブな場合、ビューアのユーザーインターフェイスの上にオーバーレイされたモーダルモードで表示されます。 ビューアのロジックによって、サムネールコンテナのサイズがビューア領域全体に自動的に変更されます。

サムネールコンテナの外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7thumbnailgridview

CSS プロパティ
説明
ビューアの上部からのサムネールコンテナの垂直方向のオフセット。
margin-top
上余白。
margin-left
左余白。
margin-right
右余白。
margin-bottom
下余白。
の背景色の
サムネール領域の背景色。

例 – 上から 32 ピクセルのオフセット、左右に 5 ピクセルの余白、下に 8 ピクセルの余白を持つサムネールを、背景を 0xDDDDDD めて設定します。

.s7ecatalogsearchviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

サムネール間の間隔は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

CSS プロパティ
説明
margin
各サムネールの周囲の水平方向と垂直方向の余白のサイズ。 実際の水平方向のサムネールの間隔は、.s7thumbcell に設定された左右の余白 合計と等しくなります。 垂直方向のサムネールの間隔は、上下の余白の合計に等しくなります。

例 – 10 ピクセルのスペースを垂直方向と水平方向の両方で設定する場合

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

個々のサムネールの外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

CSS プロパティ
説明
サムネールの幅。
高さ
サムネールの高さ。
境界線
サムネールのボーダー。
の背景色の
サムネールの背景色

タッチデバイスで、縦長モードに回転すると、ビューアは、カタログを個々のページに分割することを決定した場合に備えて、設定された半分のサイズにサムネールを表示できます。

NOTE
サムネールでは state 属性セレクターがサポートされており、これを使用して異なるスキンを異なるサムネール状態に適用できます。 特に、state="selected" は、現在メインビューに表示されている画像のサムネールに対応 state="default"、残りのサムネールに対応し、マウスのカーソルを合わせ state="over" ときに使用されます。

例 – 120 x 85 ピクセルのサムネールで、背景が白、標準の境界線が明るいグレー、選択した境界線が濃いグレーになるように設定します。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

サムネールラベルの外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

CSS プロパティ
説明
フォントファミリーの
フォント名。
font-size
フォントサイズ。

例 – 14 ピクセルの Helvetica® フォントを使用するラベルをセットアップする

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

ビューに垂直方向に収まらないサムネイルがある場合、サムネイルは右側の垂直スクロールバーをレンダリングします。 スクロールバー領域の外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

CSS プロパティ
説明
スクロール バーの幅を指定します。
サムネール領域の上部からの垂直スクロールバーのオフセット。
サムネール領域の下部からの垂直スクロールバーのオフセット。
right
サムネール領域の右端からの水平スクロールバーのオフセット。

例 – 幅 28 ピクセルで、サムネール領域の上、右および下から 8 ピクセルのマージンを持つスクロールバーを設定する。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

スクロールバートラックは、上部と下部のスクロールボタンの間の領域です。 トラックの位置と高さが自動的に設定されます。 トラックは、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS プロパティ
説明
スクロール バーのトラックの幅です。
の背景色の
スクロール バートラックの背景色です。

例 – 幅 28 ピクセルで、背景が半透明のスクロールバーのトラックを設定する場合

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

スクロールバーの親指は、スクロールトラック領域内で垂直に移動します。 垂直方向の位置はコンポーネントロジックによって完全に制御されますが、コンテンツの量に応じて親指の高さが動的に変化することはありません。 親指の高さやその他の側面は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS プロパティ
説明
スクロールバーの親指の幅。
高さ
スクロールバーのサムネールの高さ。
padding-top
スクロール バートラックの上部の間の垂直方向のパディングです。
padding-bottom
スクロール バートラックの下部の垂直方向のパディングです。
background-image
特定のサムネール状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

CSS スプライト ール 参照してください。

NOTE
Thumb は、state 属性セレクターをサポートしています。これを使用して、Thumb 状態 updownoverdisabled に様々なスキンを適用できます。

例 – 28 x 45 ピクセルのスクロールバーの親指を設定し、上下に 10 ピクセルの余白があり、状態ごとに異なるアートワークを持つ場合。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

上部と下部のスクロールボタンの外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

CSS topleftbottom および right プロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアロジックによって自動的に配置されます。

CSS プロパティ
説明
ボタンの幅。
高さ
ボタンの高さ。
background-image
特定のサムネール状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

CSS スプライト ール 参照してください。

NOTE
これらのボタンは、state 属性セレクターをサポートしています。このセレクターを使用して、ボタンの様々な状態 updownoverdisabled に様々なスキンを適用できます。

ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 – 28 x 32 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定する場合

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8