Pannellumでブラウザに最大表示してみる

JavaScript

ほとんどcssのメモ

theta.html?image_file_path.jpg

こんな感じでファイルにパラメータを付けて呼び出す。縦幅を100%にしてみた。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>theta view</title>
    <link rel="stylesheet" href="pannellum.css"/>
    <script type="text/javascript" src="pannellum.js"></script>

    <script type="text/javascript">
	<!--
	//パラメータから画像ファイル名を取得
	var img_name = location.href.split("?")[1];
	
	if(typeof(img_name) === "undefined"){
		img_name = "alma.jpg";
	}
	-->
	</script>

    <style>
    	html, body {
    		height: 100%;
    		margin: 0;
    		padding: 0;
    	}
    	#panorama {
			position: relative;
			height: auto;
			min-height: 100%;
    	}
    </style>
    
</head>
<body>

<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": img_name,
    "autoLoad": true,
    "autoRotate": -2,
    "title": "360ビュー",
    "author": "kenmituo"
});
</script>

</body>
</html>

ホントはiframeからの呼び出しとダイレクト表示でcssを切り替えるようにしたかった。。。