I'm trying to embed kennydude's JavaScript Photo Sphere viewer (https://github.com/kennydude/photosphere) into a Contao CMS 2.11-based web site. I'm basically using the following code from his test.html which I adapted for the specific site:
<a href="http://www.***.tld/tl_files/labor/scripts/pano1.jpg" id="goForIt">Berechnen</a>
<div id="sphere" style="width: 100%; height: 300px;"></div>
<script src="http://www.***.tld/tl_files/labor/scripts/three.min.js"></script>
<script type="text/javascript" src="http://www.***.tld/tl_files/labor/scripts/sphere.js"></script>
<script type="text/javascript">
document.getElementById("goForIt").onclick = function(){
sphere = new Photosphere(this.getAttribute("href"));
sphere.loadPhotosphere(document.getElementById("sphere"));
return false;
};
</script>
I pasted that code into a .tpl file which has been uploaded to my templates folder and I'm embedding it via {{file:code.tpl}
in a "custom HTML" content element.
However, it doesn't work - the link is visible in the frontend page, but it doesn't make the Photo Sphere load - however, it just redirects me to the sphere's JPG file.
How can I properly embed the sphere in my Contao frontend page?
Thanks in advance!