ページビュー page-view
メインビューは、カタログ画像で構成されます。 スワイプして別のページに移動したり、ズームしたりできます。
メイン ビューア領域のCSS プロパティ
表示領域の外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7pageview
CSS プロパティ
説明
背景色
メインビューの背景色（16進数形式）。
カーソル
メインビュー上に表示されるカーソル。
例 – メインビューを透明にします。
.s7ecatalogsearchviewer .s7pageview {
background-color: transparent;
}
デスクトップシステムでは、コンポーネントは.s7pageview クラスに適用できるcursortype属性セレクターをサポートし、コンポーネントの状態とユーザーアクションに基づいてカーソルの種類を制御します。 次のcursortype値がサポートされています：
値
説明
デフォルト
画像の解像度が小さい、コンポーネント設定、またはその両方が原因で、画像がズームできない場合に表示されます。
ズームイン
画像をズームインできる場合に表示されます。
さんがをリセットしました
画像が最大ズームレベルで、初期状態にリセットできる場合に表示されます。
をドラッグ
ユーザーがズームイン状態の画像をパンしたときに表示されます。
スライド
ユーザーが水平方向のスワイプまたはフリックを行って画像の入れ替えを実行したときに表示されます。
カタログスプレッドの左右のページを視覚的に区切るページ区切りは、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7pageview .s7pagedivider
CSS プロパティ
説明
幅
ページ区切りの幅。 ディバイダを完全に非表示にするには、 0 pxに設定します。
背景画像
ページディバイダとして使用する画像。
例 – 半透明の画像を含む幅40 ピクセルのページディバイダを作成します。
.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
NOTE
frametransition修飾子がturnまたはautoに設定されている場合（デスクトップシステムの場合）、ページディバイダの外観はpageturnstyle修飾子で制御され、.s7pagedividerCSS クラスは無視されます。メインビューア領域の上にカスタムマウスカーソルを表示するように設定できます。 この機能は、.s7ecatalogsearchviewer .s7pageview CSS クラスに適用された追加の属性セレクターで制御されます。
CSS プロパティ
説明
デフォルト
通常は矢印が表示され、ズームできない画像が表示されます。
ズームイン
画像をズームインできるタイミングを表示します。
さんがをリセットしました
画像のズームが最大で、リセット可能な場合に表示します。
をドラッグ
ズームされた画像に対してユーザーがドラッグ操作を実行する場合に表示します
スライド
ユーザーがスライドジェスチャーを使用して画像の入れ替えを実行する場合に表示します
例 – コンポーネントの状態のタイプごとに異なるマウスカーソルを使用します。
.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref