JS function to toggle Panotour Map  

This sub-forum is for discussing and reporting bugs on any content that is not available by default in Panotour, so this concerns custom HTML templates, extra plugins (both Kolor-provided and third-party), etc...

Ce sous-forum a été créé pour discuter et/ou rapporter des bugs sur tout contenu qui n'est pas disponible par défaut dans Panotour, donc cela concerne les templates HTML customisés, plugins supplémentaires, etc...
no avatar
mikepostons
Member
 
Topic author
Posts: 20
Likes: 4 posts
Liked in: 5 posts
Joined: Mon Apr 25, 2016 1:24 pm
Info

JS function to toggle Panotour Map

by mikepostons » Wed Apr 27, 2016 4:31 pm

Hi Guys,

I have been searching the forum/docs and been pulling out my hair with this one all day, so thought is was about time to ask for help!

I wanted to add either a CSS class or ID to a Simple Button (plugin) in order to be able to style it responsively. From what I have read on similar threads, although it sounds simple, its actually a massively long winded process and pain to do.

Therefore, I decided I would just create my own HTML template (clone of Bubbles) with a button to toggle a Pantour Map sidebar:

Code: Select all
<a href="#" class="toggleMapButton" title="Toggle Google Map"></a>


Obviously I need to link this button to a JS function for toggling the map sidebar, I couldn't find the existing script to do this so I started inspecting the code and seeing what the existing JS was doing. It looked like mainly it was just CSS changes, so I ended up with a script like this and added it to the bottom of the functions in the index.html page of my custom template:

Code: Select all
/* Toggle Map Custom Function */
$('.toggleMapButton').click(function() {
   $("#mapcontainer").addClass('ui-resizable');
   $("#mapcontainer").css({"width":"30%","display":"block","position":"absolute","z-index":"4003","height":"100%","float":"left"});
   $("#panoDIV").css({"width":"70%"});
   $("#mapcontainer .ui-resizable-handle").css({"z-index":"90","display":"block"});
   $(".gm-style-pbc").css({"display":"block"});
});


However, this is a complete bodge job and and although the sidebar opens etc, the Google Map doesn't load.

So my question is: Surely the JS function to toggle the map already exists somewhere? So how can I trigger it using my new custom button in the HTML? I know the templates have examples of functions for various things, but none of them use the map plugin, so I have nothing to compare it to.

Any help of advice would be appreciated! Even if its just pointing me to where the existing functions are.

Many thanks in advance,

Mike

Pantotour Pro 2.5

User avatar
bdd
Kolor Team
 
Posts: 2802
Likes: 14 posts
Liked in: 130 posts
Joined: Tue Jan 18, 2011 4:05 pm
Info

Re: JS function to toggle Panotour Map

by bdd » Mon May 02, 2016 2:18 pm

Add the following code in your HTML file, if it does not exist yet :

Code: Select all
         var panotourPlayer = null;
         function getTourPlayer() {
            if ( panotourPlayer == null ) {
               panotourPlayer = document.getElementById('krpanoSWFObject');
            }return panotourPlayer;
         }


Then to open or close the map will be done with those calls :

Code: Select all
         getTourPlayer().call('panotourmapsOpentourmap()');
         getTourPlayer().call('panotourmapsClosetourmap()');


Gérald

no avatar
mikepostons
Member
 
Topic author
Posts: 20
Likes: 4 posts
Liked in: 5 posts
Joined: Mon Apr 25, 2016 1:24 pm
Info

Re: JS function to toggle Panotour Map

by mikepostons » Tue May 03, 2016 3:19 pm

Thanks Bdd, that worked great!

Two more questions, if that is ok :)

1) Is there a toggle version of that function? Ideally I want to toggle the map open/closed using a single button.

2) What would be the function to toggle hide/show of hotspots?

Many thanks, Mike


Who is online

Users browsing this forum: No registered users and 1 guest

cron