Page 1 of 1

Current Pano Name / Description

PostPosted: Tue Nov 15, 2016 1:58 pm
by mikepostons
Hi guys,

hopefully this is simple to do. Basically I'm customising a HTML template and I want to have the pano name / description appear in the bottom corner. The code i've tried is:

Code: Select all
<header>
   {% for group in project.panoGroups %}
      {% for pano in group.panos %}
         <h1>{{pano.description.name}}</h1>
      {% endfor %}
   {% endfor %}
</header>


But this just pulls a list of all the pano names. So how do I get it to show just the current pano name? Is there a templating tag that I need to wrap this in?

Many thanks in advance. Mike

Re: Current Pano Name / Description  [SOLVED]

PostPosted: Tue Nov 15, 2016 2:15 pm
by Annis
Have a look at the HTML templates on this page: http://www.kolor.com/wiki-en/action/vie ... _Templates

Some of them display the current Pano name and description (like the Bootstrap Dark on Light with Project Colors - Responsive template), you should be able to find the code you need from them.

You might need to use the plugin that comes with the template with your own template to access the description in the template.

Re: Current Pano Name / Description

PostPosted: Tue Nov 15, 2016 3:03 pm
by mikepostons
Thanks for the info Annis, I did look at one of the other templates and couldn't see the code. I have found it now though.

For everyone's future reference, this is what you need to add to the HTML template index file:

Code: Select all
<h1 class="panorama-title"></h1>
<p class="panorama-desc"></p>


Code: Select all
<script>
// Dynamic Pano Title and Description
   function updatePanorama(panoid) {

   window.history.pushState(null, null, "#s=" + panoid);

   var panotourPlayer = getTourPlayer();
   var groupid = panotourPlayer.get("scene["+panoid+"].group");
   var titleid = panotourPlayer.get("scene["+panoid+"].titleid");            

   //HTML tags with this class (panorama-title) will display the current panorama title
   jQuery('.panorama-title').html(ktools.I18N.getInstance().getMessage(titleid));

   //HTML tags with this class (panorama-desc) will display the current panorama description
   var descriptionid = panotourPlayer.get("scene["+panoid+"].descriptionid");
      if (descriptionid != "") {
         jQuery('.panorama-desc').show();
         jQuery('.panorama-desc').html(ktools.I18N.getInstance().getMessage(descriptionid));               
      }else {
         jQuery('.panorama-desc').hide();
      }
               
   }
</script>


You will need the Bootstarp external plugin installed as well.