サムネール thumbnails
サムネールは、サムネール画像のグリッドで構成され、右側には垂直方向のスクロールを可能にするオプションのスクロールバーがあります。
メインコントロールバーのサムネールボタンをクリックすると、サムネールが切り替わります。 サムネールがアクティブな場合、ビューアのユーザーインターフェイスの上にオーバーレイされたモーダルモードで表示されます。 ビューアのロジックによって、サムネールコンテナのサイズがビューア領域全体に自動的に変更されます。
サムネールコンテナの外観は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview
例 – 上から 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
例 – 10 ピクセルのスペースを垂直方向と水平方向の両方で設定する場合
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
margin: 5px;
}
個々のサムネールの外観は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb
タッチデバイスで、縦長モードに回転すると、ビューアは、カタログを個々のページに分割することを決定した場合に備えて、設定された半分のサイズにサムネールを表示できます。
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
例 – 14 ピクセルの Helvetica® フォントを使用するラベルをセットアップする
.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
font-family: Helvetica,sans-serif;
font-size: 12px;
}
ビューに垂直方向に収まらないサムネイルがある場合、サムネイルは右側の垂直スクロールバーをレンダリングします。 スクロールバー領域の外観は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar
例 – 幅 28 ピクセルで、サムネール領域の上、右および下から 8 ピクセルのマージンを持つスクロールバーを設定する。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
top:8px;
bottom:8px;
right:8px;
width:28px;
}
スクロールバートラックは、上部と下部のスクロールボタンの間の領域です。 トラックの位置と高さが自動的に設定されます。 トラックは、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack
例 – 幅 28 ピクセルで、背景が半透明のスクロールバーのトラックを設定する場合
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
スクロールバーの親指は、スクロールトラック領域内で垂直に移動します。 垂直方向の位置はコンポーネントロジックによって完全に制御されますが、コンテンツの量に応じて親指の高さが動的に変化することはありません。 親指の高さやその他の側面は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb
state 属性セレクターをサポートしています。これを使用して、Thumb 状態 up、down、over、disabled に様々なスキンを適用できます。例 – 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 top、left、bottom および right プロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアロジックによって自動的に配置されます。
state 属性セレクターをサポートしています。このセレクターを使用して、ボタンの様々な状態 up、down、over、disabled に様々なスキンを適用できます。ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – 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);
}