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
ipanorama:ready ipanorama:config ipanorama:fullscreen ipanorama:mode ipanorama:transform-mode-changed
Tooltip Events
ipanorama:tooltip-show ipanorama:tooltip-hide
Popover Events
ipanorama:popover-show ipanorama:popover-hide
Scene / Camera Events
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-end ipanorama:scene-camera-change
Some Examples
Lock rotation
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;
});
Custom Marker Click
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));
}
Custom loading
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);
});
