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.
- ipanorama:ready
- ipanorama:config
- ipanorama:fullscreen
- ipanorama:mode
- ipanorama:transform-mode-changed
- ipanorama:tooltip-show
- ipanorama:tooltip-hide
- ipanorama:popover-show
- ipanorama:popover-hide
- ipanorama:scene-before-load
- ipanorama:scene-after-load
- ipanorama:scene-progress
- ipanorama:scene-error
- ipanorama:scene-show-start
- ipanorama:scene-show-complete
- ipanorama:scene-hide-start
- ipanorama:scene-hide-complete
- ipanorama:scene-clear
- ipanorama:scene-index
-
- ipanorama:scene-point-add
- ipanorama:scene-point-remove
- ipanorama:scene-point-dragstart
- ipanorama:scene-point-dragend
- ipanorama:scene-point-select
- ipanorama:scene-point-deselect
- ipanorama:scene-point-hide
- ipanorama:scene-point-show
- ipanorama:scene-point-change
-
- ipanorama:scene-plane-add
- ipanorama:scene-plane-remove
- ipanorama:scene-plane-dragstart
- ipanorama:scene-plane-dragend
- ipanorama:scene-plane-select
- ipanorama:scene-plane-deselect
-
- ipanorama:scene-camera-start
- ipanorama:scene-camera-change
-
var instance = this,
- $ = jQuery;
-
- instance.$container.on("ipanorama:scene-after-load", function(e, data) {
- data.scene.control.minPolarAngle = 90 * Math.PI / 180;
- data.scene.control.maxPolarAngle = 90 * Math.PI / 180;
-
});
-
var instance = this,
- $ = jQuery;
-
-
function onMarkerClick(e) {
- var userData = this.cfg.userData;
- if(userData) {
- var $iframe = $(userData);
- $.featherlight($iframe);
- }
- }
-
-
for(var i=0;i<instance.markers.length;i++) {
- var marker = instance.markers[i];
- marker.$marker.on('click', $.proxy(onMarkerClick, marker));
- }
-
const plugin = this;
-
const $ = jQuery;
-
const $loading = $('<div>').addClass('myloading').text('loading');
-
- plugin.$container.append($loading);
-
- plugin.$container.on('ipanorama:scene-progress', (e, data) => {
- const flag = data.progress.loaded == data.progress.total;
- $loading.toggleClass('active', !flag);
-
});
THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More
2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More
Short look back at 2023 This has been a busy and interesting year. I am… Read More
Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More
Archaeology Travel is an online travel guide for people who enjoy exploring the world’s pasts.… Read More
Artificial intelligence (AI) has revolutionized the way we interact with images, and the current AI… Read More