ドキュメントAEMDynamic Media ビューアリファレンスガイド

ズームビュー zoom-view

最終更新日： 2025年8月14日

作成対象：

  • {"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

連続ズームモードでは、現在のアセットが単一の画像の場合、メインビューはズーム可能な画像で構成されます。

メイン ビューア領域の​CSS プロパティ

表示領域の外観は、次のCSS クラスセレクターで制御されます。

.s7mixedmediaviewer .s7zoomview
CSS プロパティ
説明
背景色
メインビューの16進数形式の背景色。
カーソル
メインビューの上にカーソルが表示されます。

例 – ズームビューを透明にします。

.s7mixedmediaviewer .s7zoomview {
 background-color: transparent;
}

デスクトップシステムでは、コンポーネントは.s7zoomview クラスに適用できるcursortype属性セレクターをサポートしています。 コンポーネントの状態とユーザーアクションに基づいてカーソルの種類を制御します。 次のcursortype値がサポートされています：

  • default

    画像の解像度が小さい場合、またはコンポーネントの設定が原因で画像がズームできない場合、またはその両方が表示されます。

  • zoomin

    画像をズームインできる場合に表示されます。

  • reset

    画像が最大ズームレベルで、初期状態にリセットできる場合に表示されます。

  • drag

    ユーザーがズームイン状態の画像をパンしたときに表示されます。

  • slide

    ユーザーが水平方向のスワイプまたはフリックを行って画像の入れ替えを実行したときに表示されます。

recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref