옛날 글에서 자바스크립트로 360도 이미지 뷰어를 만드는 방법이 있었는데 좀 복잡하고 이미지도 여러 개로 나눠져 사용했습니다. 아주 간단한 방법으로 360도 이미지 뷰어를 만드는 방법을 워드프레스에 적용해보겠습니다.
https://codyhouse.co/gem/360-degrees-product-viewer/
위 사이트는 다양한 소스를 제공하는 사이트입니다.
Demo 버튼을 클릭하면 아래처럼 자동차 이미지를 360도 회전시켜 시현해볼 수 있습니다.
이미지를 클릭하거나 하단의 버튼을 클릭해서 드래그하면 회전합니다. Download 버튼을 클릭해 소스를 내려받습니다.
압축파일을 해제하고 폴더로 들어가 index.html 파일을 클릭하면 자동차 이미지 대신 숫자 이미지가 나옵니다. 클릭드래그해서 작동되는지 확인합니다. index.html 파일을 편집기에 열고 어떤 파일이 필요한지 확인합니다. css 경로의 style.css파일과 js 폴더의 자바스크립트 파일 두 개가 필요합니다. 파란색으로 하이라이트 된 부분이 워드프레스 페이지에 사용할 코드입니다. 이 코드를 복사합니다.
새 페이지를 만들고 페이지 빌더에서 Raw HTML 요소를 선택합니다. 코드를 붙여넣고 이미지 파일의 경로를 수정합니다.
워드프레스 테마 폴더에서 css 폴더를 만들고 압축해제한 폴더에서 style.css 파일을 복사해 붙여넣습니다.
img 폴더를 복사해 테마 폴더에 붙여넣습니다.
js 폴더를 만들고 두 가지 js 파일을 복사해 붙여넣습니다.
function legenda_child_scripts() {
// 자바스크립트 등록
wp_enqueue_script('mobile-js', get_stylesheet_directory_uri() . '/js/jquery.mobile.custom.min.js', array('jquery'), 150120, true);
wp_enqueue_script('main-js', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'), 150120, true);
wp_enqueue_style( 'custom_css', get_stylesheet_directory_uri() . '/css/style.css' );
}
add_action('wp_enqueue_scripts', 'legenda_child_scripts');
테마의 functions.php 파일을 열고 위처럼 코드를 만듭니다.
사이트에서 확인하면 위처럼 나타납니다. 제 경우 자동자 이미지를 다운받아 숫자 이미지와 교체했습니다. 데모에 포함된 이미지는 아래처럼 하나의 이미지에 스프라이트 이미지로 만들어져 있습니다.
이러한 이미지를 여러 각도에서 촬영하는 방법은 아래의 포스팅을 참고하세요. 상당히 자세하게 나와있습니다.
