[javascript] 자바스크립트 Universal Viewer에서 제공하는 빠른 검색 기능

30 Nov 2023

javascript

자바스크립트 Universal Viewer는 대규모 이미지 및 동영상 콘텐츠를 보여주는 라이브러리입니다. Universal Viewer는 다양한 기능을 제공하며, 그 중 하나는 빠른 검색 기능입니다. 이 기능을 사용하면 사용자는 콘텐츠에서 원하는 키워드를 빠르게 검색할 수 있습니다.

검색 기능 사용법

Universal Viewer의 검색 기능은 간단하고 사용하기 쉽습니다. 다음 단계를 따라서 검색 기능을 활용할 수 있습니다.

Universal Viewer 라이브러리를 HTML 문서에 가져옵니다. 다음과 같이 스크립트 태그를 사용하여 라이브러리를 추가합니다.

<script src="universalviewer.min.js"></script>

검색 기능을 사용할 이미지 뷰어를 추가합니다. 다음과 같이 div 엘리먼트를 생성하고, id 속성을 설정하여 이미지 뷰어를 식별합니다.

<div id="uv"></div>

자바스크립트를 사용하여 검색 기능을 초기화합니다. 다음과 같이 코드를 작성합니다.

var uv = window.createUV('#uv');

uv.extensions['uv-seadragon-extension'].isDebugEnabled = true; // 디버그 모드 활성화 (선택 사항)
uv.extensions['uv-searchExtension'].isEnabled = true; // 검색 기능 활성화

// 검색어와 검색 결과 표시 위치 설정
uv.extensions['uv-searchExtension'].searchOptions = {
    searchBox: 'searchBox',
    resultsContainer: 'searchResults'
};

uv.embed({}); // 이미지 뷰어를 초기화하고 렌더링

검색 기능 옵션

Universal Viewer의 검색 기능에는 여러 가지 옵션을 설정할 수 있습니다. 몇 가지 중요한 옵션은 다음과 같습니다.

searchBox: 검색어를 입력할 입력 상자의 ID입니다.
resultsContainer: 검색 결과를 표시할 컨테이너의 ID입니다.

검색 기능의 옵션은 searchBox와 resultsContainer를 포함한 JavaScript 객체로 설정할 수 있습니다.

uv.extensions['uv-searchExtension'].searchOptions = {
    searchBox: 'searchBox',
    resultsContainer: 'searchResults'
};

결론

자바스크립트 Universal Viewer의 빠른 검색 기능을 사용하면 사용자는 이미지 및 동영상 콘텐츠에서 원하는 정보를 쉽게 찾을 수 있습니다. 이러한 기능을 활용하여 사용자의 경험을 향상시키고 유용한 기능을 제공할 수 있습니다.

검색 기능 사용법

검색 기능 옵션

결론

참고 자료