PanoramaViewer-omeka-module/view/common/block-layout/panorama-viewer.phtml

<?php
	$this->headLink()->appendStylesheet($this->assetUrl('vendor/pannellum/pannellum.css',
																											'PanoramaViewer'));
	$this->headScript()->appendFile($this->assetUrl('vendor/pannellum/pannellum.js',
																									'PanoramaViewer'));
	$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
																									'PanoramaViewer'));

	if ($panorama_type == "video") {
		$this->headLink()->appendStylesheet($this->assetUrl('vendor/video.js/video-js.css',
																												'PanoramaViewer'));
		$this->headScript()->appendFile($this->assetUrl('vendor/video.js/video.js',
																										'PanoramaViewer'));
		$this->headScript()->appendFile($this->assetUrl('vendor/pannellum/videojs-pannellum-plugin.js',
																										'PanoramaViewer'));
	}
	if ($title !== false && $title !== "") {
		$title = sprintf('<p id="panorama-viewer-title">%s</p>', $title);
	} else {
		$title = false;
	}
?>

<style>
	.pannemmul-wrap {
		width: 100%;
	}
</style>

<div class="archive-item-block" style="position:relative;">

	<?php if ($renderSourceLink) { ?>
		<div class="source-link">
			<a href="<?= $item_url ?>">Source</a>
		</div>
	<?php } ?>

	<div class="pannellum-wrap">
	<?php if ($panorama_type == "video") { ?>
		<video 	id="<?= $id ?>"
						class="video-js vjs-default-skin vjs-big-play-centered"
		  			controls preload="none"
		  			poster="<?= $thumbnails[0]['medium'] ?>"
						crossorigin="anonymous">
					<?php for($i = 0; $i < count($urls); ++$i) { ?>
						<source src="<?= $urls[$i] ?>" type="<?= $mediaTypes[$i] ?>"/>
					<?php } ?>
		   <p class="vjs-no-js">
		       To view this video please enable JavaScript, and consider upgrading to
		       a web browser that <a href="http://videojs.com/html5-video-support/"
		       target="_blank">supports HTML5 video</a>
		   </p>
		</video>
	<?php } else { ?>
		<div id="<?= $id ?>" class="panorama-viewer"></div>
	<?php } ?>

	<?php if ($title) { ?>
		<div class="item_title">
			<?= $title ?>
		</div>
  <?php } ?>
	</div>

</div>

<script>
	<?php if ($panorama_type == "equirectangular") { ?>
			pannellum.viewer("<?= $id ?>", {
						type: "equirectangular",
						autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
						panorama: "<?= $urls[0]; ?>",
			});
	<?php } ?>
	<?php if ($panorama_type == "cubemap") { ?>
			pannellum.viewer("<?= $id ?>", {
						type: "cubemap",
						autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
						cubeMap: <?= json_encode($urls, JSON_UNESCAPED_SLASHES) ?>,
			});
	<?php } ?>
	<?php	if ($panorama_type == "partial") { ?>
			pannellum.viewer("<?= $id ?>", {
				type: "equirectangular",
				autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
				panorama: "<?= $urls[0]; ?>",
				haov: 149.87,
				vaov: 54.15,
				vOffset: 1.17
			});
	<?php	} ?>
	<?php	if ($panorama_type == "video") { ?>
		videojs("<?= $id ?>", {
			 plugins: {
					pannellum: {}
			 }
		});
	<?php	} ?>
	var height = get_height('#<?= $id ?>', <?= $ratio ?>)
	$('#<?= $id ?>').css('height', height)
</script>