[javascript] Universal Viewer를 사용한 풀스크린 및 모바일 최적화 기능

30 Nov 2023

javascript

Universal Viewer는 웹 기반의 이미지 및 동영상 뷰어로, 다양한 미디어 콘텐츠를 표시하고 조작할 수 있습니다. 이번 블로그 포스트에서는 Universal Viewer를 이용하여 풀스크린 및 모바일 최적화 기능을 구현하는 방법에 대해 알아보겠습니다.

Universal Viewer 설치 및 설정

Universal Viewer를 다운로드하고 웹 서버에 설치합니다.
HTML 파일에 Universal Viewer 라이브러리를 로드합니다.
```
<script src="universalviewer.min.js"></script>
```
Universal Viewer를 초기화하고 뷰어를 생성합니다.
```
var viewer = new UV.Viewer({
...
});
```

풀스크린 모드 기능 추가

Universal Viewer에 풀스크린 모드 기능을 추가하기 위해서는 아래의 단계를 따릅니다.

풀스크린 버튼을 추가합니다.

viewer.addModule("uv-fullscreen-extension.js");
viewer.extensions["uv-fullscreen-extension"].options = {
logoEnabled: true,
logoUrl: "fullscreen.png"
};

풀스크린 버튼에 클릭 이벤트를 추가합니다.

viewer.on("created", function() {
var button = viewer.getExtension("uv-fullscreen-extension").getButton();
button.element.addEventListener("click", function() {
    viewer.setFullScreen(!viewer.isFullScreen());
});
});

모바일 최적화 기능 추가

Universal Viewer의 모바일 최적화 기능을 구현하기 위해 아래의 단계를 따릅니다.

모바일 스크롤 제스처를 추가합니다.

viewer.addModule("uv-touch-events-extension.js");

반응형 레이아웃을 추가합니다.

viewer.addModule("uv-responsive-extension.js");

모바일 브라우저에서 전체 화면 모드로 전환할 수 있는 기능을 추가합니다.
```
viewer.addModule("uv-mobile-fullscreen-extension.js");
```

이제 Universal Viewer에 풀스크린 및 모바일 최적화 기능이 추가되었습니다. 웹 페이지에서 Universal Viewer를 로드하고 풀스크린 버튼을 클릭하면 전체 화면 모드로 전환되고, 모바일 장치에서도 최적화된 방식으로 뷰어를 사용할 수 있습니다.

더 자세한 내용은 아래의 참고 자료를 확인해주세요.