Universal Viewer 설치
Universal Viewer를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 아래와 같이 npm을 사용하여 Universal Viewer를 설치합니다.
npm install universalviewer
Universal Viewer 초기화
Universal Viewer를 웹 페이지에서 사용하기 위해서는 해당 라이브러리를 초기화해야 합니다. 아래는 초기화 과정입니다.
import {UV} from 'universalviewer';
const uv = new UV({
...
});
위 코드에서 생성자 함수의 인자로 설정 객체를 전달합니다. 설정 객체에는 Universal Viewer에서 필요한 여러 옵션을 설정할 수 있습니다. 이 중에서 페이지 전환과 썸네일 네비게이션과 관련된 옵션을 설정해야 합니다.
페이지 전환 구현
Universal Viewer에서 페이지 전환은 Manifest라는 오브젝트를 사용하여 구현합니다. Manifest는 이미지나 비디오 등의 미디어 콘텐츠 정보를 담고 있는 객체입니다.
const manifest = {
"label": "Example Manifest",
"sequences": [
{
"label": "Default Sequence",
"canvases": [
{
"label": "Canvas 1",
"images": [
{
"resource": {
"service": {
"profile": "http://iiif.io/api/image/2/level2.json",
"id": "http://example.com/image1.jpg"
},
"format": "image/jpeg"
},
"thumbnail": {
"id": "http://example.com/image1-thumbnail.jpg",
"format": "image/jpeg"
}
},
...
]
}
]
}
]
};
uv.addManifest(manifest);
위 코드에서는 Manifest를 작성한 후, addManifest() 메서드를 사용하여 Universal Viewer에 추가합니다. 이제 페이지 전환 기능이 구현되었습니다.
썸네일 네비게이션 구현
Universal Viewer에서 썸네일 네비게이션은 각 캔버스의 썸네일 이미지를 표시하여 페이지 간의 탐색을 도와줍니다. 아래 코드는 썸네일 네비게이션을 추가하는 방법입니다.
uv.set('thumbsEnabled', true);
위 코드에서 set() 메서드를 사용하여 thumbsEnabled 옵션을 true로 설정하면 썸네일 네비게이션을 활성화할 수 있습니다. 이제 썸네일 네비게이션 기능이 구현되었습니다.
결론
Universal Viewer를 사용하면 웹 페이지에서 페이지 전환과 썸네일 네비게이션을 구현할 수 있습니다. 해당 기능을 이용하면 미디어 콘텐츠를 보다 편리하게 탐색할 수 있습니다. 더 많은 Universal Viewer 기능에 대해서는 공식 문서를 참조하시기 바랍니다.
참고 자료