확대/축소

확대/축소 뷰어는 확대/축소 가능한 이미지를 표시하는 이미지 뷰어입니다. 이 뷰어는 이미지 세트와 연동하며 견본을 사용하여 탐색합니다. 확대/축소 툴, 전체 화면 지원, 색상 견본 및 닫기 버튼(선택 사항)을 제공합니다. 데스크톱 및 모바일 장치에서 작동하도록 설계되었습니다.

노트

IR(이미지 렌더링) 또는 UGC(사용자 생성 콘텐츠)를 사용하는 이미지는 이 뷰어에서 지원되지 않습니다.

뷰어 유형 502입니다.

시스템 요구 사항 및 전제 조건을 참조하십시오.

데모 URL

https://s7d9.scene7.com/s7viewers/html5/ZoomViewer.html?asset=Scene7SharedAssets/ImageSet-Views-Sample

확대/축소 뷰어 사용

Zoom Viewer는 뷰어가 런타임 시 다운로드한 기본 JavaScript 파일 및 도우미 파일 집합(단일 JavaScript는 이 특정 뷰어에서 사용하는 모든 뷰어 SDK 구성 요소, 자산, CSS)을 나타냅니다.

IS-Viewers와 함께 제공되는 프로덕션 준비 HTML 페이지 또는 내장 모드에서 문서화된 API를 사용하여 대상 웹 페이지에 통합되는 확대/축소 뷰어를 팝업 모드에서 사용할 수 있습니다.

구성 및 스키닝은 다른 뷰어와 유사합니다. 모든 스키닝은 사용자 지정 CSS를 통해 수행됩니다.

모든 뷰어에 공통으로 사용되는 명령 참조 - 구성 특성명령 참조(모든 뷰어에 공통됨 - URL)

확대/축소 뷰어와 상호 작용

확대/축소 뷰어는 다른 모바일 응용 프로그램에서 일반적으로 사용되는 다음 터치 제스처를 지원합니다. 뷰어에서 사용자의 스와이프 동작을 처리할 수 없는 경우 이벤트를 웹 브라우저로 전달하여 기본 페이지 스크롤을 수행합니다. 이러한 종류의 기능을 사용하면 뷰어가 장치 화면 영역의 대부분을 차지하더라도 사용자가 페이지를 탐색할 수 있습니다.

제스처

설명

한 번의 탭

견본에서 새로운 축소판을 선택합니다. 기본 보기에서는 사용자 인터페이스 요소를 숨기거나 표시합니다.

두 번 누르기

최대 배율에 도달할 때까지 한 단계 확대합니다. 다음 두 번 누르면 뷰어가 초기 보기 상태로 재설정됩니다.

핀치

확대 또는 축소

가로 스와이프 또는 터크

견본 막대에서 견본 목록을 스크롤합니다.

이미지가 재설정 상태이고 frametransition 매개 변수가 슬라이드에 설정된 경우, 자산이 슬라이드 애니메이션으로 변경됩니다. 다른 매개 변수 모드의 경우 제스처는 기본 페이지 스크롤을 수행합니다.

이미지를 확대하면 이미지를 가로로 이동합니다. 이미지가 보기 가장자리로 이동하고 스와이프가 동일한 방향으로 수행되는 경우 제스처는 기본 페이지 스크롤을 수행합니다.

세로 스와이프

이미지가 재설정 상태인 경우 제스처는 기본 페이지 스크롤을 수행합니다.

이미지를 확대하면 이미지가 세로로 이동합니다. 이미지가 보기 가장자리로 이동하고 스와이프가 동일한 방향으로 수행되면 제스처는 기본 페이지 스크롤을 수행합니다.

견본 영역 내에서 동작을 수행하면 기본 페이지 스크롤이 수행됩니다.

뷰어는 터치 화면과 마우스로 Windows 장치에서 터치 입력 및 마우스 입력을 모두 지원합니다. 그러나 이러한 지원은 Chrome, Internet Explorer 11 및 Edge 웹 브라우저로만 제한됩니다.

이 뷰어는 키보드로 완벽하게 액세스할 수 있습니다.

키보드 접근성 및 탐색을 참조하십시오.

확대/축소 뷰어 포함

웹 페이지마다 뷰어 비헤이비어에 대한 요구 사항이 다릅니다. 웹 페이지가 클릭되면 별도의 브라우저 창에서 뷰어를 여는 링크를 제공하는 경우가 있습니다. 다른 경우에는 뷰어를 호스팅 페이지에 직접 포함해야 합니다. 후자의 경우, 웹 페이지에는 정적 레이아웃이 있거나, 다른 장치 또는 서로 다른 브라우저 창 크기에 대해 다르게 표시되는 반응형 디자인을 사용할 수 있습니다. 이러한 요구 사항을 충족하기 위해 뷰어는 다음 세 가지 기본 작업 모드를 지원합니다. 팝업, 고정 크기 임베드 및 반응형 디자인 임베드.

팝업 모드 정보

팝업 모드에서 뷰어는 별도의 웹 브라우저 창이나 탭에서 열립니다. 브라우저 크기가 조정되거나 장치 방향이 변경되는 경우 전체 브라우저 창 영역이 열리고 조정됩니다.

이 모드는 모바일 장치에서 가장 일반적으로 사용됩니다. 웹 페이지는 JavaScript 호출, 올바르게 구성된 window.open() A HTML 요소 또는 기타 적절한 방법을 사용하여 뷰어를 로드합니다.

팝업 작업 모드에서는 기본 HTML 페이지를 사용하는 것이 좋습니다. 기본적으로 제공되는 HTML 페이지가 호출되며 표준 IS-Viewers 배포 ZoomViewer.htmlhtml5/ 하위 폴더 아래에 다음과 같이 위치합니다.

<s7viewers_root>/html5/ZoomViewer.html

사용자 지정 CSS를 적용하여 페이지의 사용자 지정된 모양을 얻을 수 있습니다.

다음은 새 창에서 뷰어를 여는 HTML 코드의 예입니다.

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

고정 크기 포함 모드 및 반응형 디자인 임베드 모드 정보

포함된 모드에서는 뷰어가 기존 웹 페이지에 추가되며, 여기에는 뷰어와 관련이 없는 일부 고객 컨텐츠가 이미 있을 수 있습니다. 뷰어는 일반적으로 웹 페이지의 부동산 중 일부만을 차지합니다.

데스크톱 또는 태블릿 장치의 웹 페이지 지향과 장치 유형에 따라 레이아웃을 자동으로 조정하는 반응형 디자인 페이지도 주요 사용 사례입니다.

뷰어가 초기 로드 후 크기를 변경하지 않는 경우 고정 크기 임베딩이 사용됩니다. 이 옵션은 정적 레이아웃이 있는 웹 페이지에 가장 적합합니다.

반응형 디자인 임베드 모드에서는 컨테이너의 크기 변경으로 인해 런타임 중에 뷰어의 크기를 조정할 필요가 있다고 가정합니다 DIV. 가장 일반적인 사용 사례는 유연한 레이아웃을 사용하는 웹 페이지에 뷰어를 추가하는 것입니다.

반응형 디자인 임베드 모드에서 뷰어는 웹 페이지의 컨테이너 크기 방식에 따라 다르게 동작합니다 DIV. 웹 페이지가 컨테이너의 너비만 설정하고 높이가 제한을 두지 않는 경우 DIV뷰어는 사용되는 자산의 종횡비에 따라 높이를 자동으로 선택합니다. 이러한 논리는 측면 패딩 없이 에셋이 보기에 완벽하게 어울리도록 해줍니다. 이 사용 사례는 Bootstrap, 기반 등과 같은 응답형 레이아웃 프레임워크를 사용하는 웹 페이지에 가장 일반적으로 사용됩니다.

웹 페이지가 뷰어의 컨테이너 너비와 높이를 모두 설정하는 경우 뷰어는 해당 영역 DIV을 채우고 웹 페이지가 제공하는 크기를 따릅니다. 예를 들어 뷰어를 모달 오버레이에 포함하여 오버레이의 크기가 웹 브라우저 창 크기에 따라 조정됩니다.

고정 크기 임베드

다음을 수행하여 웹 페이지에 뷰어를 추가합니다.

  1. 웹 페이지에 뷰어 JavaScript 파일을 추가합니다.

  2. 컨테이너 DIV 정의.

  3. 뷰어 크기 설정

  4. 뷰어를 만들고 초기화합니다.

  5. 웹 페이지에 뷰어 JavaScript 파일을 추가합니다.

    뷰어를 만들려면 HTML 헤드에 스크립트 태그를 추가해야 합니다. 뷰어 API를 사용하려면 먼저 포함해야 합니다 ZoomViewer.js. 이 ZoomViewer.js 파일은 표준 IS-Viewers 배포의 html5/js/ 하위 폴더 아래에 있습니다.

<s7viewers_root>/html5/js/ZoomViewer.js

뷰어가 Adobe Dynamic Media Classic 서버 중 하나에 배포되고 동일한 도메인에서 제공되는 경우 상대 경로를 사용할 수 있습니다. 그렇지 않으면 IS-Viewers가 설치된 Adobe Dynamic Media Classic 서버 중 하나에 대한 전체 경로를 지정합니다.

상대 경로는 다음과 같습니다.

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/ZoomViewer.js"></script>
노트

페이지에서 기본 뷰어 JavaScript include 파일만 참조해야 합니다. 런타임 시 뷰어의 논리로 다운로드될 수 있는 추가 JavaScript 파일을 웹 페이지 코드에서 참조해서는 안 됩니다. 특히, 컨텍스트 경로(소위 통합 SDK)에서 뷰어가 불러온 HTML5 SDK Utils.js 라이브러리를 직접 참조하지 /s7viewers include마십시오. 런타임 뷰어 라이브러리의 위치 Utils.js 는 뷰어의 논리로 완전히 관리되고 뷰어 릴리스 간에 위치가 변경되기 때문입니다. Adobe는 이전 버전의 보조 뷰어를 서버에 보관하지 않습니다 includes .

따라서 페이지 뷰어에서 include 사용하는 보조 JavaScript를 직접 참조하는 경우 새 제품 버전이 배포될 때 나중에 뷰어 기능이 중단됩니다.

  1. 컨테이너 DIV 정의.

    뷰어를 표시할 페이지에 빈 DIV 요소를 추가합니다. 이 ID는 나중에 뷰어 API로 전달되므로 DIV 요소에는 ID가 정의되어 있어야 합니다.

    자리 표시자 DIV는 위치 요소로서, 즉 position CSS 속성이 relative 또는 absolute로 설정되어 있습니다.

    다음은 정의된 자리 표시자 DIV 요소의 예입니다.

    <div id="s7viewer" style="position:relative"></div>
    
  2. 뷰어 크기 설정

    이 뷰어는 여러 항목 세트로 작업할 때 축소판을 표시합니다. 데스크탑 시스템 축소판은 기본 보기 아래에 표시됩니다. 동시에 뷰어는 setAsset() API를 사용하여 런타임에서 기본 자산을 교환하도록 허용합니다. 개발자는 새 자산에 항목이 하나만 있을 때 뷰어가 아래쪽에 있는 축소판 영역을 관리하는 방법을 제어할 수 있습니다. 외부 뷰어 크기를 그대로 유지하면서 기본 보기에서 높이를 늘리고 축소판을 점령할 수 있습니다. 또는 기본 보기 크기를 정적 상태로 유지하고 외부 뷰어 영역을 축소하여 웹 페이지 컨텐츠를 위로 이동하고 축소판에서 남은 무료 화면 공간을 사용할 수 있습니다.

    외부 뷰어 범위를 그대로 유지하려면 최상위 CSS 클래스의 크기를 .s7zoomviewer 절대 단위로 정의합니다. CSS의 크기를 HTML 페이지 또는 사용자 정의 뷰어 CSS 파일에 배치할 수 있습니다. 이 파일은 나중에 Scene7 Publishing System의 뷰어 사전 설정 레코드에 할당되거나 스타일 명령을 사용하여 명시적으로 전달됩니다.

    CSS를 사용한 뷰어 스타일 지정에 대한 자세한 내용은 확대/축소 뷰어 사용자 지정을 참조하십시오.

    다음은 HTML 페이지에서 정적 외부 뷰어 크기를 정의하는 예입니다.

    #s7viewer.s7zoomviewer { 
     width: 640px; 
     height: 480px; 
    }
    

    다음 예제에서는 고정된 외부 뷰어로 동작을 볼 수 있습니다. 세트 간에 전환할 때 외부 뷰어 크기는 변경되지 않습니다.

    https://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/ZoomViewer-fixed-outer-area.html

    기본 보기 차원을 정적으로 만들려면 CSS 선택기를 사용하거나 수정자를 사용하여 내부 Container SDK 구성 요소의 .s7zoomviewer 절대 단위 .s7container 로 뷰어 크기를 stagesize 정의합니다.

    다음은 자산을 전환할 때 기본 보기 영역의 크기가 변경되지 않도록 내부 Container SDK 구성 요소의 뷰어 크기를 정의하는 예입니다.

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

    다음 데모 페이지에는 기본 보기 크기가 고정된 뷰어 동작이 표시됩니다. 세트 간에 전환할 때 기본 보기는 정적 상태로 유지되며 웹 페이지 컨텐츠는 세로로 이동됩니다.

    https://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/samples/ZoomViewer-fixed-main-view.html

    Scene7 Publishing System의 뷰어 사전 설정 레코드에서 stagesize 수정자를 설정하거나, 다음과 같이 이 도움말의 명령 참조 섹션에 설명된 대로 뷰어 초기화 코드를 params 컬렉션과 함께 또는 API 호출로 명시적으로 전달할 수 있습니다.

     zoomViewer.setParam("stagesize", 
    "640,480");
    

    CSS 기반 접근 방식이 권장되며 이 예에서 사용됩니다.

  3. 뷰어를 만들고 초기화합니다.

    위의 단계를 완료하면 클래스 인스턴스를 만들고 모든 구성 정보를 생성자에 전달하며 뷰어 인스턴스에서 호출 s7viewers.ZoomViewer init() 메서드를 호출합니다.

    구성 정보는 생성자에게 JSON 개체로 전달됩니다. 최소한 이 개체에는 뷰어가 지원하는 구성 매개 변수를 사용하여 뷰어 컨테이너 ID와 중첩된 containerId params JSON 개체의 이름을 포함하는 필드가 있어야 합니다. 이 경우 params 개체에는 속성으로 전달되는 이미지 제공 URL serverUrl 과 매개 변수로 초기 자산이 asset 있어야 합니다. JSON 기반 초기화 API를 사용하여 단일 코드 행을 사용하여 뷰어를 만들고 시작할 수 있습니다.

    뷰어 코드가 ID로 컨테이너 요소를 찾을 수 있도록 뷰어 컨테이너를 DOM에 추가해야 합니다. 일부 브라우저는 웹 페이지가 끝날 때까지 DOM 작성을 지연합니다. 호환성을 최대화하려면 닫는 init() 태그 앞 또는 body BODY onload() 이벤트에서 메서드를 호출합니다.

    또한 컨테이너 요소가 아직 웹 페이지 레이아웃에 포함되어 있지 않아야 합니다. 예를 들어 지정된 스타일을 사용하여 숨겨질 수 display:none 있습니다. 이 경우 뷰어는 웹 페이지가 컨테이너 요소를 레이아웃으로 다시 가져올 때까지 초기화 프로세스를 지연합니다. 이 경우 뷰어 부하가 자동으로 다시 시작됩니다.

    다음은 뷰어 인스턴스를 만들고, 필요한 최소 구성 옵션을 생성자에게 전달하고, 메서드를 호출하는 init() 예입니다. 이 예에서는 뷰어 인스턴스 zoomViewer 가 자리 표시자 DIV s7viewer 의 이름이고, 이미지 제공 URL이며, 자산이라고 가정합니다 http://s7d1.scene7.com/is/image/ Scene7SharedAssets/ImageSet-Views-Sample .

    <script type="text/javascript"> 
    var zoomViewer = new s7viewers.ZoomViewer({ 
     "containerId":"s7viewer", 
    "params":{ 
     "asset":"Scene7SharedAssets/ImageSet-Views-Sample", 
     "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/ZoomViewer.js"></script> 
    <style type="text/css"> 
    #s7viewer.s7zoomviewer { 
     width: 640px; 
     height: 480px; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="s7viewer" style="position:relative"></div> 
    <script type="text/javascript"> 
    var zoomViewer = new s7viewers.ZoomViewer({ 
     "containerId":"s7viewer", 
    "params":{ 
     "asset":"Scene7SharedAssets/ImageSet-Views-Sample", 
     "serverurl":"http://s7d1.scene7.com/is/image/" 
    } 
    }).init(); 
    </script> 
    </body> 
    </html>
    

제한 없는 높이를 갖는 반응형 디자인 임베드

반응형 디자인 임베드에서는 일반적으로 웹 페이지에 뷰어 컨테이너의 런타임 크기를 지정하는 유연한 레이아웃이 포함되어 있습니다 DIV. 다음 예를 들어 웹 페이지에서 뷰어의 컨테이너 크기가 웹 브라우저 창 크기의 40% DIV 를 차지하여 높이가 제한되지 않는 것으로 가정해 봅시다. 웹 페이지 HTML 코드는 다음과 같습니다.

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

페이지에 뷰어를 추가하는 것은 고정 크기 임베드 단계와 비슷합니다. 유일한 차이는 뷰어 크기를 명시적으로 정의할 필요가 없다는 것입니다.

  1. 웹 페이지에 뷰어 JavaScript 파일을 추가합니다.
  2. 컨테이너 DIV 정의.
  3. 뷰어를 만들고 초기화합니다.

위의 모든 단계는 고정 크기 임베딩과 동일합니다. 기존 DIV에 컨테이너 DIV를 "holder" 추가합니다. 다음 코드는 완전한 예입니다. 브라우저 크기를 변경할 때 뷰어 크기가 어떻게 변경되고 뷰어 종횡비가 자산과 어떻게 일치하는지 확인합니다.

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/ZoomViewer.js"></script> 
<style type="text/css"> 
.holder { 
 width: 40%; 
} 
</style> 
</head> 
<body> 
<div class="holder"> 
<div id="s7viewer" style="position:relative"></div> 
</div> 
<script type="text/javascript"> 
var zoomViewer = new s7viewers.ZoomViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample", 
 "serverurl":"http://s7d1.scene7.com/is/image/" 
} 
}).init(); 
</script> 
</body> 
</html> 

다음 예제 페이지에서는 무제한 높이와 함께 반응형 디자인 임베딩의 실제 사용을 보여줍니다.

라이브 데모

너비 및 높이가 정의된 유연한 크기 임베드

폭 및 높이가 정의된 유연한 크기 임베딩의 경우 웹 페이지 스타일이 다릅니다. DIV에 두 가지 크기 "holder" 를 제공하고 브라우저 창에서 가운데에 표시합니다. 또한 웹 페이지는 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/ZoomViewer.js"></script> 
<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 id="s7viewer" style="position:relative"></div> 
</div> 
<script type="text/javascript"> 
var zoomViewer = new s7viewers.ZoomViewer({ 
 "containerId":"s7viewer", 
"params":{ 
 "asset":"Scene7SharedAssets/ImageSet-Views-Sample", 
 "serverurl":"http://s7d1.scene7.com/is/image/" 
} 
}).init(); 
</script> 
</body> 
</html> 

setter 기반 API를 사용하여 포함

JSON 기반 초기화를 사용하는 대신 setter 기반 API와 인수 없음 생성자를 사용할 수 있습니다. 이 API 생성자를 사용하는 경우에는 별도의 JavaScript 호출과 함께 setContainerId(), setParam()setAsset() API 메서드를 사용하여 지정된 매개 변수와 구성 매개 변수가 발생하지 않습니다.

다음 예에서는 setter 기반 API와 함께 고정 크기 임베드 사용을 보여 줍니다.

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

이 페이지에서는