インラインズーム inline-zoom

インラインズームビューアは、画像ビューアです。 ユーザーがロールオーバーするか、メインビューに触れたときに、その静止画像の上に表示されるズームバージョンの静止画像が表示されます。 このビューアは画像セットで機能し、ナビゲーションはスウォッチを使用して行われます。 デスクトップやモバイルデバイスで動作するように設計されています。

ビューアータイプは504です。

必要システム構成と前提条件を参照してください。

デモ URL section-e1c3106f5b3e445d9b95be337c2f94e2

https://landing.adobe.com/en/na/dynamic-media/ctir-2755/live-demos.html

インラインズームビューアの使用 section-f21ac23d3f6449ad9765588d69584772

インラインズームビューアは、メインのJavaScript ファイルと、実行時にビューアによってダウンロードされたすべてのビューアSDK コンポーネント、アセット、CSSを含む一連のヘルパーファイルを表します（1つのJavaScriptには、この特定のビューアで使用されるすべてのビューア コンポーネントが含まれます）。

インラインズームビューアは、画像サービングビューアを備えた実稼動対応のHTML ページを使用するポップアップモードと、文書化されたAPIを使用してターゲット web ページに統合する埋め込みモードの両方で使用できます。

設定とスキニングは、他のビューアと同様です。 カスタム CSSを使用してスキニングを適用できます。

すべてのビューアに共通する​ コマンド参照 – 構成属性およびすべてのビューアに共通するコマンド参照 – URLを参照してください

インラインズームビューアの操作 section-ab66eb6955aa4a8aa6d14a3b3acfed3f

インラインズームビューアは、他のモバイルアプリケーションで一般的なシングルタッチおよびマルチタッチジェスチャーをサポートしています。

ビューアは、タッチスクリーンとマウスを備えたWindows デバイスでのタッチ入力とマウス入力の両方をサポートしています。 ただし、このサポートは、Chrome、Internet Explorer 11、およびEdgeのweb ブラウザーのみに限定されます。

このビューアにはキーボードから完全にアクセス可能です。

​ キーボードのアクセシビリティとナビゲーション ​を参照してください。

インラインズームビューアの埋め込み section-6bb5d3c502544ad18a58eafe12a13435

web ページごとに、閲覧者の行動に対するニーズは異なります。 Web ページで、別のブラウザーウィンドウでビューアを開くクリック可能なリンクが提供されることがあります。 それ以外の場合、ビューアをホスティングページに直接埋め込む必要がある場合があります。 後者の場合、web ページは静的なページレイアウトを使用するか、異なるデバイスで異なる表示を行うレスポンシブデザインを使用するか、または異なるブラウザーウィンドウのサイズを使用します。 これらのニーズに対応するために、ビューアでは、ポップアップ、固定サイズの埋め込み、レスポンシブ埋め込みの3つの主要な操作モードをサポートしています。

ポップアップ

ポップアップモードでは、ビューアは別のweb ブラウザーウィンドウまたはタブで開きます。 ブラウザーウィンドウ領域全体を使用し、ブラウザーウィンドウのサイズ変更やデバイスの向きの変更を行うときに調整します。

このモードは、モバイルデバイスで最も一般的です。 Web ページは、window.open() JavaScript呼び出し、適切に設定されたA HTML要素、またはその他の適切な方法を使用してビューアを読み込みます。

FlyoutViewer.htmlというポップアップモードには、標準のHTML ページを使用することをお勧めします。 これは、標準のImage Serving-Viewers デプロイメントのhtml5/ サブフォルダーにあります。

<s7viewers_root>/html5/FlyoutViewer.html

また、インラインズームモードで動作するようにFlyoutZoomView コンポーネントを設定する必要があります。 インラインズームビューアには、標準のScene7SharedAssets/Universal_HTML5_Zoom_Inline プリセットまたはインラインズームビューアから派生したカスタムプリセットを使用することをお勧めします。 カスタム CSSを適用することで、視覚的なカスタマイズを実現できます。

次に、ビューアを新しいウィンドウで開くHTML コードの例を示します。

 <a href="http://s7d1.scene7.com/s7viewers/html5/FlyoutViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample&config=Scene7SharedAssets/Universal_HTML5_Zoom_Inline"target="_blank">Open popup viewer</a>

固定サイズ埋め込みとレスポンシブ埋め込み

埋め込みモードでは、ビューアは既存のweb ページに追加されます。このページには、ビューアに関連しない顧客コンテンツが既に含まれている可能性があります。 通常、閲覧者はweb ページの不動産の一部しか占めていません。

主なユースケースは、デスクトップ PCやタブレットデバイス向けのweb ページです。また、デバイスの種類に応じてレイアウトを自動的に調整するレスポンシブ web ページも使用できます。

固定サイズ埋め込みモードは、ビューアが初期読み込み後にサイズを変更しない場合に使用されます。 このオプションは、静的ページレイアウトを持つweb ページに最適です。

レスポンシブデザイン埋め込みモードは、コンテナ DIVのサイズ変更に応じて、実行時にビューアのサイズを変更する必要があることを前提としています。 最も一般的なユースケースは、柔軟性の高いページレイアウトを使用するweb ページにビューアを追加することです。

インラインズームビューアでレスポンシブデザイン埋め込みモードを使用する場合は、imagereload パラメーターを使用して、メインビュー画像に明示的なブレークポイントを指定してください。 理想的には、Web ページ CSSで指定されているビューアの幅のブレークポイントとブレークポイントを一致させます。

レスポンシブデザイン埋め込みモードでは、web ページコンテナ DIVのサイズに応じてビューアの動作が異なります。 Web ページがコンテナ DIVの幅のみを設定し、高さを制限しない場合、ビューアは使用されるアセットの縦横比に応じて自動的に高さを選択します。 この機能により、側面にパディングすることなく、アセットがビューに完全に収まります。 このユースケースは、BootstrapやFoundationなどのレスポンシブデザインレイアウトフレームワークを使用するweb ページで最も一般的です。

それ以外の場合、web ページがビューアのコンテナ DIVの幅と高さの両方を設定すると、ビューアはその領域のみを塗りつぶし、web ページレイアウトによって提供されるサイズに従います。 良い使用例は、ビューアをモーダルオーバーレイに埋め込むことです。このオーバーレイは、web ブラウザーのウィンドウサイズに応じてサイズが調整されます。

固定サイズ埋め込み

次の操作を実行して、ビューアをweb ページに追加します。

<s7viewers_root>/html5/js/FlyoutViewer.js

ビューアがAdobe Dynamic Media サーバーのいずれかにデプロイされ、同じドメインから提供される場合は、相対パスを使用できます。 そうでない場合は、IS-ViewersがインストールされているAdobe Dynamic Media サーバーの1つにフルパスを指定します。

相対パスは次のようになります。

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/FlyoutViewer.js"></script>

メインビューのディメンションを静的にするには、.s7flyoutviewer .s7container CSS セレクターを使用して、内部Container SDK コンポーネントのビューアーサイズを絶対単位で定義します。 さらに、デフォルトのビューア CSSの.s7flyoutviewerの最上位CSS クラスに定義されている固定サイズをautoに設定して上書きする必要があります。

次に、アセットを切り替える際にメインビュー領域のサイズが変更されないように、内部Container SDK コンポーネントのビューアーサイズを定義する例を示します。

#s7viewer.s7flyoutviewer {
 width: auto;
 height: auto;
}
#s7viewer.s7flyoutviewer .s7container {
 width: 640px;
 height: 480px;
}

また、デフォルトのビューア CSSでは、標準装備の外部領域の固定サイズが提供されます。

無制限の高さを持つレスポンシブデザイン埋め込み section-056cb574713c4d07be6d07cf3c598839

レスポンシブデザインの埋め込みでは、通常、web ページには、ビューアのコンテナ DIVのランタイムサイズを決定する、ある種の柔軟なレイアウトが配置されています。 次の例では、web ページでビューアのコンテナ DIVがweb ブラウザーのウィンドウ サイズの40%を使用でき、高さは制限されないと仮定します。 Web ページのHTML コードは次のようになります。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

このようなページにビューアを追加することは、固定サイズ埋め込みの手順と似ています。 唯一の違いは、デフォルトのビューア CSSの固定サイズを、相対単位で設定したサイズで上書きする必要があることです。

上記のすべての手順は、次の3つの例外を除いて、固定サイズの埋め込みと同じです。

#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}

次のコードは、完全な例です。 ブラウザーのサイズを変更するとビューアのサイズが変わり、ビューアの縦横比がアセットとどのように一致するかを確認します。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative;z-index:1"></div>
</div>
<script type="text/javascript">
var inlineZoomViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
"config" : "Scene7SharedAssets/Universal_HTML5_Zoom_Inline",
"contenturl" : "http://s7d1.scene7.com/is/content/",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "imagereload":"1,breakpoint,200;400;800;1600"
}
}).init();
</script>
</body>
</html>

次のサンプルページでは、高さの制限のないレスポンシブデザイン埋め込みをより実際に使用する方法を示します。

ライブデモ

幅と高さが定義された柔軟なサイズ埋め込み section-0a329016f9414d199039776645c693de

幅と高さが定義された柔軟なサイズの埋め込みがある場合、web ページのスタイルが異なります。 "holder" DIVに両方のサイズを提供し、ブラウザーウィンドウに中央に配置します。 また、web ページでは、HTML要素とBODY要素のサイズが100%に設定されています。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

残りの埋め込み手順は、高さの制限のないレスポンシブデザイン埋め込みに使用する手順と同じです。 結果として得られる例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
#s7viewer.s7flyoutviewer {
 width: 100%;
 height: 100%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative;z-index:1"></div>
</div>
<script type="text/javascript">
var inlineZoomViewer = new s7viewers.FlyoutViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample",
"config" : "Scene7SharedAssets/Universal_HTML5_Zoom_Inline",
"contenturl" : "http://s7d1.scene7.com/is/content/",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "imagereload":"1,breakpoint,200;400;800;1600"
}
}).init();
</script>
</body>
</html>

Setter ベースのAPIを使用した埋め込み section-af26f0cc2e5140e8a9bfd0c6a841a6d1

JSON ベースの初期化を使用する代わりに、セッターベースのAPIとno-args コンストラクターを使用できます。 このAPI コンストラクターを使用すると、パラメーターは受け取られず、設定パラメーターはsetContainerId()、setParam()、およびsetAsset() API メソッドを使用して指定され、別々のJavaScript呼び出しが行われます。

次の例は、セッターベースのAPIを使用した固定サイズの埋め込みを使用する方法を示しています。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/FlyoutViewer.js"></script>
<style type="text/css">
#s7viewer.s7flyoutviewer {
 width: 640px;
 height: 480px;
}
</style>
</head><body>
<div id="s7viewer" style="position:relative;z-index:1;"></div>
<script type="text/javascript">
var inlineZoomViewer = new s7viewers.FlyoutViewer();
inlineZoomViewer.setContainerId("s7viewer");
inlineZoomViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
inlineZoomViewer.setParam("config", "Scene7SharedAssets/Universal_HTML5_Zoom_Inline");
inlineZoomViewer.setParam("contenturl", "http://s7d1.scene7.com/is/content/");
inlineZoomViewer.setAsset("Scene7SharedAssets/ImageSet-Views-Sample");
inlineZoomViewer.init();
</script>
</body>
</html>