フライアウトズーム表示 flyout-zoom-view

インラインズームモードでは、メインビューは静止画像で構成されます。 また、静止画像のフライアウトビューに表示される拡大表示された画像と、静止画像の上に表示されるヒントのメッセージで構成されます。

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

メインビューの外観は、次のCSS クラスセレクターで制御されます。

.s7mixedmediaviewer .s7flyoutzoomview

例 – メインビューを透明にするには：

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

チップメッセージの外観は、次のCSS クラスセレクターで制御されます。

.s7mixedmediaviewer .s7flyoutzoomview .s7tip

CSSを使用して、フォントスタイル、サイズの外観、および縦方向のオフセットを設定できます。 ただし、水平方向の整列はビューアロジックによって管理されます。 leftまたはright プロパティを使用したCSSによる上書きはサポートされていません。

ヒント メッセージの​CSS プロパティ

ヒント メッセージはローカライズできます。 詳しくは、​ ユーザーインターフェイス要素のローカライゼーション ​を参照してください。

例 – 白いArial® 12 ピクセルのフォント、メインビューの下部から50 ピクセルのオフセット、パディング、丸みを帯びた境界線を含む半透明の先端メッセージを設定するには、次の手順を実行します。

.s7mixedmediaviewer .s7flyoutzoomview .s7tip {
bottom: 50px;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: #000000;
border-radius: 4px;
opacity: 0.5;
filter: alpha(opacity = 50);
}