Javascript

iPanorama 360 – Events / API

Extending iPanorama 360 can be a challenge, as none of the events are documented. You can talk to the developer or ask for support to get things done.

You can also read up on the core assets used:
ipanorama.min.js
jquery.ipanorama.min.js.

You can easily search for the events and figure out the parameters passed. Here a quick reference for things I used so far.

Main Events

  1. ipanorama:ready
  2. ipanorama:config
  3. ipanorama:fullscreen
  4. ipanorama:mode
  5. ipanorama:transform-mode-changed

Tooltip Events

  1. ipanorama:tooltip-show
  2. ipanorama:tooltip-hide

Popover Events

  1. ipanorama:popover-show
  2. ipanorama:popover-hide

Scene / Camera Events

  1. ipanorama:scene-before-load
  2. ipanorama:scene-after-load
  3. ipanorama:scene-progress
  4. ipanorama:scene-error
  5. ipanorama:scene-show-start
  6. ipanorama:scene-show-complete
  7. ipanorama:scene-hide-start
  8. ipanorama:scene-hide-complete
  9. ipanorama:scene-clear
  10. ipanorama:scene-index
  11.  
  12. ipanorama:scene-point-add
  13. ipanorama:scene-point-remove
  14. ipanorama:scene-point-dragstart
  15. ipanorama:scene-point-dragend
  16. ipanorama:scene-point-select
  17. ipanorama:scene-point-deselect
  18. ipanorama:scene-point-hide
  19. ipanorama:scene-point-show
  20. ipanorama:scene-point-change
  21.  
  22. ipanorama:scene-plane-add
  23. ipanorama:scene-plane-remove
  24. ipanorama:scene-plane-dragstart
  25. ipanorama:scene-plane-dragend
  26. ipanorama:scene-plane-select
  27. ipanorama:scene-plane-deselect
  28.  
  29. ipanorama:scene-camera-start
  30. ipanorama:scene-camera-end
  31. ipanorama:scene-camera-change

Some Examples

Lock rotation

  1. var instance = this,
  2. $ = jQuery;
  3.  
  4. instance.$container.on("ipanorama:scene-after-load", function(e, data) {
  5.     data.scene.control.minPolarAngle = 90 * Math.PI / 180;
  6.     data.scene.control.maxPolarAngle = 90 * Math.PI / 180;
  7. });

Custom Marker Click

  1. var instance = this,
  2. $ = jQuery;
  3.  
  4. function onMarkerClick(e) {
  5.     var userData = this.cfg.userData;
  6.     if(userData) {
  7.         var $iframe = $(userData);
  8.         $.featherlight($iframe);
  9.     }
  10. }
  11.  
  12. for(var i=0;i<instance.markers.length;i++) {
  13.     var marker = instance.markers[i];
  14.     marker.$marker.on('click', $.proxy(onMarkerClick, marker));
  15. }

Custom loading

  1. const plugin = this;
  2. const $ = jQuery;
  3. const $loading = $('<div>').addClass('myloading').text('loading');
  4.  
  5. plugin.$container.append($loading);
  6.  
  7. plugin.$container.on('ipanorama:scene-progress', (e, data) => {
  8.    const flag = data.progress.loaded == data.progress.total;
  9.    $loading.toggleClass('active', !flag);
  10. });
Alex

I am a full-stack developer. I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing. I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest. Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Recent Posts

WordPress Cron + WP-CLI + Ntfy

THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More

1 month ago

2024 is here and now :)

2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More

3 months ago

2023 ends and whats next !

Short look back at 2023 This has been a busy and interesting year. I am… Read More

3 months ago

cubicFUSION Grid Tweaker – Elementor Grid made easy.

Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More

4 months ago

Archaeology Travel Booth – Travel Innovation Summit 2023

Archaeology Travel is an online travel guide for people who enjoy exploring the world’s pasts.… Read More

5 months ago

Artificial intelligence (AI) is revolutionizing the way we interact with images

Artificial intelligence (AI) has revolutionized the way we interact with images, and the current AI… Read More

5 months ago