고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
360도 이미지를 볼 수있는 jQuery 소스 (VR 파노라마뷰어, 이미지뷰어)
아래 사이트에서 제공하는 소스를 활용하여 360도 이미지를 볼 수 있는 jQuery 소스를 만들어봤습니다
https://pannellum.org/
모바일에서 가로/세로 변경 및 SCALE 변경에 따라 화면이 잘 보일 수 있도록 하는 코드도 추가했습니다
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> | |
| <meta name="viewport" content="width=device-width"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| <title>A simple example</title> | |
| <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/> | |
| <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script> | |
| <style> | |
| #panorama { | |
| width: 600px; | |
| height: 400px; | |
| position: relative; | |
| z-index: 1000; | |
| display: table; | |
| -moz-transform-origin: top left; | |
| -webkit-transform-origin: top left; | |
| -ms-transform-origin: top left; | |
| transform-origin: top left; | |
| } | |
| </style> | |
| <script language = "javascript"> | |
| function initScale(){ | |
| var ress = navigator.userAgent; | |
| if (ress.indexOf("Android 1.", 0) > -1 ){ //안드로이드2. 이하만 설정 | |
| if (ress.indexOf("480", 0) > -1 ) { // 480x800 | |
| var per = 0.5226824457593688; | |
| } else if(ress.indexOf("600", 0) > -1 ) { // 600 x 1024 | |
| var per = 0.681 | |
| } else if(ress.indexOf("1280", 0) > -1 ) { // 800 x 1280 | |
| var per = 0.631 | |
| } | |
| } else { | |
| var dh = window.innerHeight; | |
| var dw = window.innerWidth; | |
| var cw = parseInt( $('#panorama').css('width') ); | |
| var ch = parseInt( $('#panorama').css('height') ); | |
| var per = dw/cw; | |
| var per2 =dh/ch; | |
| if(per > per2 ){ | |
| per = per2; | |
| } | |
| var gapH = ( dh - (ch*per) )/2; | |
| var gapW = ( dw - (cw*per) )/2 | |
| } | |
| $("#panorama").css('transform', 'scale('+per+','+per+')'); | |
| $('body').css('margin-top', gapH ); | |
| $('body').css('margin-left', gapW ); | |
| curScale = per; | |
| } | |
| window.onresize = function(){ | |
| initScale(); | |
| } | |
| window.onload = function() { | |
| initScale(); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="panorama"></div> | |
| <script> | |
| |
| var sImageFileName = "01.jpg"; | |
| pannellum.viewer('panorama', { | |
| "type": "equirectangular", | |
| "panorama": sImageFileName | |
| }); | |
| </script> | |
| </body> | |
| </html> |
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| javascript 마우스클릭위치 알아내기 , 클릭된 태그(엘리먼트)알아내기 (0) | 2018.03.27 |
|---|---|
| jquery barcode 출력 (바코드출력) 하기, jquery공개소스 (0) | 2018.03.20 |
| javascript: url 에서 경로 / 파일명 / 확장자 분리하기... 추출하기 split()함수 (0) | 2017.01.02 |
| javascript 문자열 검색/ 문자열 찾기 indexOf() 함수 substr_count() 함수 (0) | 2017.01.02 |
| javascript / jquery DIV 내의 자식노드(child node)를 돌면서(loop) 특정 작업을 진행 (0) | 2017.01.02 |
댓글 영역