How to Make a Custom Button Trigger Scene Change in iPanorama 360 Plugin

Here are the buttons I created using the Elementor web builder for WordPress, and I’m trying to figure out how to insert HTML or JavaScript so that when clicked, they will trigger a scene change similar to clicking on a marker in your plugin. Please help me, thank you very much.

Well, each scene has an unique ID, and you can use this ID to load the tour at the specific scene. For this you should use the paramater “sceneid” in your URL if you use iframe like link below

https://localhost.dev/ipanorama/virtualtour/1?sceneid=FB24B9099C

Thank you for your quick support, but it seems you haven’t understood my intention. For example, when I’m on the Scene link: https://localhost.dev/ipanorama/virtualtour/1?sceneid=FB24B9099C, and I click on a marker to switch to another sceneid (e.g., sceneid = FC00000), my 360 VR screen will switch to sceneid FC00000, but the browser’s displayed link remains “https://localhost.dev/ipanorama/virtualtour/1?sceneid=FB24B9099C“. I need your guidance on creating a custom button to switch sceneids without reloading the browser.

I’m very sorry for my poor English if it makes it difficult for you to understand.

To navigate between scenes in your plugin, I’ve created markers within the plugin. However, I want to create an external button outside the plugin using the WordPress page, and I’ll embed it within the iframe. I want that when I click that button, it functions the same way as when I click on a marker in your plugin.

You can understand that I want to create a custom button, but it replicates the action of a scene-switching marker. It functions like a marker.

I want to replicate the action of clicking on a marker. So that when I click on the custom button, it will also perform a scene change without reloading the browser with a new link.

Is your virtual tour inside the iFrame?

Yes, I embed the virtual tour using iFrame code, and then I create additional buttons using WordPress below it, styling them with CSS to be fixed at the bottom of my virtual tour for aesthetic purposes. Among them, there are 3 scene change buttons and 2 buttons to trigger my custom popups.
And I hope to figure out how to connect the custom buttons I’ve created with the markers, so that when clicking on either a marker or my button, it will switch to the selected Scene ID without needing to change the link in the web browser. My intention is for it to function similarly to how I click on a marker in your plugin.

• This reply was modified 1 year, 3 months ago by lnailoveme.

Ok. I’ve created a sample.

I made iframe like this. It has ID for js code below

<iframe id="iframe-ipanorama" width="100%" height="315" src="https://avirtum.dev/ipanorama/virtualtour/1" frameborder="0" style="display:block;margin:0 auto;"></iframe>

Then I pasted the button

<div id="mybutton" style="background:#000;color:#fff;">Load Scene</div>

Each scene has ID and we can load it from js code. But our panorama is inside the iframe, so we should get access to the plugin instance in this situation. I handle the “click” event from the button, then get jQuery is belonged to iframe and get plugin instance, Then I use its methods to load a specific scene.

<script>
  const sceneId = 'FB24B9099C';
  const $btn = jQuery('#mybutton');

  $btn.on('click', () => {
     const $iframe = jQuery('#iframe-ipanorama');
     // get the iframe's jQuery instance, not the parent
     const $ = $iframe.get(0).contentWindow.jQuery; 
     const $panorama = $('.ipanorama');
     const plugin = $panorama.ipanorama('instance');
     plugin && plugin.setScene({id:sceneId});
  });
</script>