인라인 확대/축소 뷰어는 이미지 뷰어입니다. 사용자가 기본 보기를 롤업하거나 터치하면 해당 정적 이미지 위에 확대/축소된 버전이 표시된 정적 이미지가 표시됩니다. 이 뷰어는 이미지 세트에서 작동하며 색상 견본을 사용하여 탐색합니다. 데스크탑 및 모바일 장치에서 작동하도록 디자인되었습니다.
IR(이미지 렌더링) 또는 UGC(사용자 생성 콘텐츠)를 사용하는 이미지는 이 뷰어에서 지원되지 않습니다.
뷰어 유형은 504입니다.
자세한 내용은 시스템 요구 사항 및 사전 요구 사항.
인라인 확대/축소 뷰어는 런타임 시 뷰어가 다운로드한 기본 JavaScript 파일 및 도우미 파일 세트(단일 JavaScript에는 이 특정 뷰어에서 사용하는 모든 뷰어 SDK 구성 요소, 자산 및 CSS)에 포함됩니다.
인라인 확대/축소 뷰어는 이미지 제공 뷰어와 함께 제공되는 프로덕션 준비 HTML 페이지를 사용하여 팝업 모드에서 또는 문서화된 API를 사용하여 대상 웹 페이지에 통합되는 포함된 모드에서 모두 사용할 수 있습니다.
구성 및 스키닝은 다른 뷰어의 구성과 유사합니다. 사용자 지정 CSS를 사용하여 스키닝을 적용할 수 있습니다.
자세한 내용은 모든 뷰어에 공통되는 명령 참조 - 구성 속성 및 모든 뷰어에 공통되는 명령 참조 - URL
인라인 확대/축소 뷰어는 다른 모바일 애플리케이션에서 일반적으로 사용되는 단일 터치 및 다중 터치 제스처를 지원합니다.
제스처 |
설명 |
---|---|
단일 탭 |
견본의 기본 및 보조 확대/축소 수준 간에 플라이아웃 보기 또는 변경 사항을 활성화하고 새 축소판을 선택합니다. |
가로 밀기 또는 밀기 |
견본 막대의 색상 견본 목록을 스크롤합니다. |
세로 밀기 |
제스처가 색상 견본 영역 내에서 수행되면 기본 페이지 스크롤이 수행됩니다. |
이 뷰어는 또한 터치 스크린과 마우스로 Windows 장치에서 터치 입력과 마우스 입력을 모두 지원합니다. 그러나 이 지원은 Chrome, Internet Explorer 11 및 Edge 웹 브라우저만 지원합니다.
이 뷰어는 키보드로 액세스할 수 있습니다.
자세한 내용은 키보드 액세스 가능성 및 탐색.
웹 페이지마다 뷰어 동작에 대한 요구 사항이 다릅니다. 경우에 따라 웹 페이지에서 별도의 브라우저 창에서 뷰어를 여는 클릭 가능한 링크를 제공합니다. 다른 경우, 뷰어를 호스팅 페이지에 직접 포함해야 할 수도 있습니다. 후자의 경우, 웹 페이지에는 정적 페이지 레이아웃이 있거나, 서로 다른 장치 또는 서로 다른 브라우저 창 크기에 대해 다르게 표시되는 응답형 디자인을 사용할 수 있습니다. 이러한 요구 사항을 수용하기 위해 뷰어는 다음 세 가지 기본 작업 모드를 지원합니다. 팝업, 고정 크기 포함 및 응답형 포함
팝업
팝업 모드에서 뷰어는 별도의 웹 브라우저 창이나 탭에서 열립니다. 전체 브라우저 창 영역을 사용하고 브라우저 창의 크기가 조정되거나 장치 방향이 변경될 때 조정됩니다.
이 모드는 모바일 장치에 가장 일반적입니다. 웹 페이지는 window.open()
올바르게 구성된 JavaScript 호출 A
HTML 요소 또는 기타 적절한 방법.
다음과 같은 팝업 모드에 기본 HTML 페이지를 사용하는 것이 좋습니다 FlyoutViewer.html
. 그것은 아래 있습니다 html5/ 표준 Image Serving-Viewers 배포의 하위 폴더:
<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>
고정 크기 포함 및 응답형 포함
포함된 모드에서 뷰어가 기존 웹 페이지에 추가되며, 이 페이지에 이미 뷰어와 관련이 없는 일부 고객 콘텐츠가 있을 수 있습니다. 뷰어는 일반적으로 웹 페이지 부동산의 일부만을 차지합니다.
기본 사용 사례는 데스크톱 또는 태블릿 장치를 위한 웹 페이지 및 장치 유형에 따라 레이아웃을 자동으로 조정하는 응답형 웹 페이지입니다.
뷰어가 초기 로드 후 크기를 변경하지 않는 경우 크기 포함 모드가 사용됩니다. 이 선택 사항은 정적 페이지 레이아웃이 있는 웹 페이지에 가장 적합합니다.
반응형 디자인 포함 모드에서는 컨테이너의 크기 변경에 응답하여 런타임 중에 뷰어의 크기를 조정해야 한다고 가정합니다 DIV
. 가장 일반적인 사용 사례는 유연한 페이지 레이아웃을 사용하는 웹 페이지에 뷰어를 추가하는 것입니다.
인라인 확대/축소 뷰어에서 응답형 디자인 포함 모드를 사용할 때는 를 사용하여 기본 보기 이미지에 대한 명시적 중단점을 지정해야 합니다 imagereload
매개 변수. 가장 좋은 방법은 웹 페이지 CSS에 따라 중단점을 뷰어 너비 중단점과 일치시키는 것입니다.
응답형 디자인 포함 모드에서 뷰어는 웹 페이지 컨테이너의 방식에 따라 다르게 동작합니다 DIV
의 크기는 입니다. 웹 페이지에서 컨테이너 너비만 설정하는 경우 DIV
키를 제한 상태로 두면 뷰어는 사용되는 자산의 종횡비에 따라 높이를 자동으로 선택합니다. 이 기능은 측면에 패딩되지 않고 자산이 보기에 완벽하게 맞습니다. 이 특정 사용 사례는 Bootstrap 또는 Foundation과 같은 반응형 디자인 레이아웃 프레임워크를 사용하는 웹 페이지에 가장 일반적입니다.
그렇지 않으면 웹 페이지에서 뷰어 컨테이너의 너비와 높이를 모두 설정합니다 DIV
를 채우면 뷰어가 해당 영역만 채워지고 웹 페이지 레이아웃으로 제공된 크기를 따릅니다. 좋은 사용 사례 예제는 뷰어를 모달 오버레이에 포함하고, 이 오버레이는 웹 브라우저 창 크기에 따라 크기가 조정됩니다.
고정 크기 포함
다음을 수행하여 웹 페이지에 뷰어를 추가합니다.
웹 페이지에 뷰어 JavaScript 파일 추가.
컨테이너 정의 DIV
.
뷰어 크기를 설정합니다.
뷰어를 만들고 초기화합니다.
웹 페이지에 뷰어 JavaScript 파일 추가.
뷰어를 만들려면 HTML 헤드에 스크립트 태그를 추가해야 합니다. 뷰어 API를 사용하려면 먼저 다음을 포함해야 합니다 FlyoutViewer.js
. FlyoutViewer.js
은 다음과 같습니다 html5/js/ 표준 IS-Viewers 배포의 하위 폴더:
<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>
기본 뷰어 JavaScript만 참조합니다 include
파일을 페이지에 넣을 수 있습니다. 런타임 시 뷰어의 논리에 의해 다운로드될 수 있는 웹 페이지 코드에서 추가 JavaScript 파일을 참조하지 마십시오. 특히 HTML5 SDK를 직접 참조하지 마십시오 Utils.js
뷰어에서 로드한 라이브러리 /s7viewers
컨텍스트 경로(소위 통합 SDK) include
). 이유는 Utils.js
또는 유사한 런타임 뷰어 라이브러리는 뷰어 논리와 뷰어 릴리스 간의 위치 변경으로 완전히 관리됩니다. Adobe은 이전 버전의 보조 뷰어를 유지하지 않습니다 includes
를 클릭합니다.
따라서 보조 JavaScript에 대한 직접 참조를 보냅니다 include
페이지에서 뷰어에서 사용하는 는 새 제품 버전을 배포할 때 나중에 뷰어 기능을 중단합니다.
컨테이너 DIV를 정의합니다.
뷰어를 표시할 페이지에 빈 DIV 요소를 추가합니다. 이 ID가 나중에 뷰어 API로 전달되므로 DIV 요소에는 해당 ID가 정의되어 있어야 합니다.
자리 표시자 DIV는 위치된 요소, 즉 position
CSS 속성이 relative
또는 absolute
.
적절한 를 지정하는 것은 웹 페이지의 책임입니다 z-index
를 반환합니다. 이렇게 하면 뷰어의 플라이아웃 부분이 다른 웹 페이지 요소의 맨 위에 표시됩니다.
다음은 정의된 자리 표시자 DIV 요소의 예입니다.
<div id="s7viewer" style="position:relative;z-index:1"></div>
뷰어 크기를 설정합니다.
이 뷰어는 여러 항목 세트로 작업할 때 축소판을 표시합니다. 데스크탑 시스템에서는 기본 보기 아래에 축소판이 배치됩니다. 동시에 뷰어에서는 를 사용하여 런타임 중에 기본 자산을 교체할 수 있습니다 setAsset()
API. 개발자는 새 자산에 항목이 하나만 있을 때 뷰어가 하단 영역에서 축소판 영역을 관리하는 방법을 제어할 수 있습니다. 외부 뷰어 크기를 그대로 유지한 다음 기본 보기에서 높이를 늘리고 축소판 영역을 점유할 수 있습니다. 또는 기본 보기 크기를 정적으로 유지하고 외부 뷰어 영역을 축소하여 웹 페이지 컨텐츠를 위로 이동한 다음 축소판에서 남은 사용 가능한 페이지 공간을 사용할 수 있습니다.
외부 뷰어 제한을 그대로 유지하려면 .s7flyoutviewer
절대 단위의 최상위 CSS 클래스입니다. CSS의 크기 조절은 HTML 페이지나 사용자 지정 뷰어 CSS 파일에 바로 적용될 수 있으며 나중에 Dynamic Media Classic의 뷰어 사전 설정 레코드에 할당하거나 스타일 명령을 사용하여 명시적으로 전달할 수 있습니다.
자세한 내용은 인라인 확대/축소 뷰어 사용자 지정 css를 사용하여 뷰어 스타일을 지정하는 방법에 대한 자세한 정보.
다음은 HTML 페이지에서 정적 외부 뷰어 크기를 정의하는 예입니다.
#s7viewer.s7flyoutviewer {
width: 640px;
height: 480px;
}
다음 샘플 페이지에서 고정된 외부 뷰어 영역이 있는 동작을 볼 수 있습니다. 세트 간에 전환할 때 외부 뷰어 크기가 변경되지 않습니다.
기본 보기 차원을 정적으로 만들려면 내면에 대한 절대 단위로 뷰어 크기를 정의합니다 Container
다음을 사용하는 SDK 구성 요소 .s7flyoutviewer .s7container
CSS 선택기. 또한 에 대해 정의된 고정 크기를 재정의해야 합니다 .s7flyoutviewer
기본 뷰어 CSS의 최상위 CSS 클래스 auto
.
다음은 내면에 대한 뷰어 크기를 정의하는 예입니다 Container
자산을 전환할 때 기본 보기 영역의 크기가 변경되지 않도록 SDK 구성 요소:
#s7viewer.s7flyoutviewer {
width: auto;
height: auto;
}
#s7viewer.s7flyoutviewer .s7container {
width: 640px;
height: 480px;
}
다음 샘플 페이지에는 고정된 기본 보기 크기를 사용하는 뷰어 동작이 표시됩니다. 세트 간에 전환할 때 기본 보기는 정적 상태로 유지되며 웹 페이지 컨텐츠는 세로로 이동합니다.
또한 기본 뷰어 CSS는 기본 외부 영역에 대해 고정 크기를 제공합니다.
뷰어를 만들고 초기화합니다.
위의 단계를 완료하면 의 인스턴스를 만듭니다 s7viewers.FlyoutViewer
클래스, 모든 구성 정보를 생성자에 전달하고 호출 init()
뷰어 인스턴스의 메서드입니다. 구성 정보는 JSON 개체로 생성자에게 전달됩니다. 최소한 이 개체에는 containerId
뷰어 컨테이너 ID와 중첩된 이름이 들어 있는 필드 params
뷰어가 지원하는 구성 매개 변수가 있는 JSON 개체. 이 경우 params
개체에는 적어도 다음 방법으로 전달된 이미지 제공 URL이 있어야 합니다. serverUrl
속성 초기 자산 asset
매개 변수, CSS를 다음으로 로드하기 위한 기본 경로 contentUrl
매개 변수 및 사전 설정 이름 config
매개 변수. JSON 기반 초기화 API를 사용하면 단일 코드 행으로 뷰어를 만들고 시작할 수 있습니다.
뷰어 코드가 ID로 컨테이너 요소를 찾을 수 있도록 DOM에 뷰어 컨테이너를 추가해야 합니다. 일부 브라우저는 웹 페이지가 끝날 때까지 DOM 작성을 지연합니다. 호환성을 최대화하려면 init()
닫기 바로 전 메서드 BODY
태그 또는 본문 onload()
이벤트.
동시에 컨테이너 요소가 아직 웹 페이지 레이아웃의 일부일 필요는 없습니다. 예를 들어 display:none
지정된 스타일입니다. 이 경우 뷰어는 웹 페이지가 컨테이너 요소를 다시 레이아웃으로 가져오는 시점까지 초기화 프로세스를 지연합니다. 이 작업이 발생하면 뷰어 로드가 자동으로 다시 시작됩니다.
다음은 뷰어 인스턴스를 만들고 필요한 최소 구성 옵션을 생성자에게 전달하여 생성자를 호출하는 예제입니다 init()
메서드를 사용합니다. 이 예제에서는 를 가정합니다 inlineZoomViewer
는 뷰어 인스턴스입니다. s7viewer
은 자리 표시자의 이름입니다 DIV
; http://s7d1.scene7.com/is/image/
는 이미지 제공 URL입니다. 및 Scene7SharedAssets/ImageSet-Views-Sample
는 자산입니다.
<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/"
}
}).init();
</script>
다음 코드는 고정된 크기의 인라인 확대/축소 뷰어를 포함하는 작은 웹 페이지의 전체 예입니다.
<!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({
"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/"
}
}).init();
</script>
</body>
</html>
반응형 디자인 포함 기능을 사용하면 일반적으로 웹 페이지에는 뷰어 컨테이너의 런타임 크기를 지시하는 유연한 레이아웃이 있습니다 DIV
. 다음 예에서는 웹 페이지에서 뷰어의 컨테이너를 허용한다고 가정합니다 DIV
웹 브라우저 창 크기의 40%를 사용하고 높이는 제한이 없습니다. 웹 페이지 HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>
이러한 페이지에 뷰어를 추가하는 것은 고정 크기 포함 단계와 비슷합니다. 유일한 차이는 기본 뷰어 CSS에서 고정된 크기 조정을 상대 단위로 설정하여 무시해야 한다는 것입니다.
DIV
.위의 모든 단계는 다음 세 가지 예외가 포함된 고정 크기 포함과 동일합니다.
DIV
기존 "홀더"에 DIV
;imagereload
명시적 중단점이 있는 매개 변수width
및 height
아래와 같이 100%까지 추가합니다.#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>
다음 예제 페이지에서는 제한 높이가 있는 반응형 디자인 포함의 실제 사용을 보여 줍니다.
너비와 높이가 정의된 유연한 크기가 있는 경우 웹 페이지 스타일링이 다릅니다. 이 서비스는 두 가지 크기를 "holder"
DIV를 실행하고 브라우저 창에 정렬합니다. 또한 웹 페이지는 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>
JSON 기반 초기화를 사용하는 대신 setter 기반 API 및 no-args 생성자를 사용할 수 있습니다. 이 API 생성자를 사용하면 매개 변수를 사용하지 않으며 setContainerId()
, setParam()
, 및 setAsset()
별도의 JavaScript 호출을 사용하는 API 메서드.
다음 예에서는 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>