インラインズーム inline-zoom

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

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

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

デモ URL section-e1c3106f5b3e445d9b95be337c2f94e2

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

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

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

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

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

​ すべてのビューアに共通のコマンドリファレンス – 設定属性 ​ および ​ すべてのビューアに共通のコマンドリファレンス - URL を参照してください

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

インラインズームビューアでは、他のモバイルアプリケーションに共通するシングルタッチジェスチャーとマルチタッチジェスチャーをサポートしています。

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

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

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

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

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

ポップアップ

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

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

ポップアップモードには、標準提供のHTML ページ FlyoutViewer.html を使用することをお勧めします。 これは、標準の画像サービングビューアデプロイメントの 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 ページの不動産の一部のみを占有します。

主なユースケースは、デスクトップまたはタブレットデバイス向けの 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 サーバーのいずれかに対するフルパスを指定します。

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

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

メインビューの寸法を静的にするには、CSS セレクターを使用して、内部の Container SDK コンポーネントのビューアサイズ .s7flyoutviewer .s7container 絶対単位で定義します。 さらに、デフォルトのビューア 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>

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

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

次の例は、setter ベースの 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>