iPanorama 360 – Events / API

4. April 2024

.SHARE

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

ipanorama:ready

ipanorama:config

ipanorama:fullscreen

ipanorama:mode

ipanorama:transform-mode-changed

Tooltip Events


ipanorama:tooltip-show
ipanorama:tooltip-hide

ipanorama:tooltip-show

ipanorama:tooltip-hide

Popover Events


ipanorama:popover-show
ipanorama:popover-hide

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

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;
});

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&lt;instance.markers.length;i++) {
    var marker = instance.markers[i];
    marker.$marker.on('click', $.proxy(onMarkerClick, marker));
}

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 = $('&lt;div&gt;').addClass('myloading').text('loading');

plugin.$container.append($loading);

plugin.$container.on('ipanorama:scene-progress', (e, data) =&gt; {
   const flag = data.progress.loaded == data.progress.total;
   $loading.toggleClass('active', !flag);
});

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);

});

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

Day 6: Monocker – Monitor Docker – 7 Days of Docker

Development / Deployment / Docker

Monitoring the health and status of Docker containers is crucial for maintaining a reliable and efficient environment. Monocker is a lightweight tool designed to address this need by monitoring Docker container state changes and sending real-time alerts through various messaging platforms. What is Monocker? Monocker, short for “MONitors dOCKER,” is an open-source application that keeps […]

…

Best Solutions to Run WordPress Locally 2025

Development / Deployment / WordPress

Running WordPress locally is essential for testing, development, and experimentation without affecting a live website. There are several solutions available, each catering to different needs. Below, we explore the best ways to set up WordPress on your local machine, along with useful links. 1. Local by Flywheel Local is a powerful, free local development environment […]

…

Day 5: mosparo an Open-Source Spam Protection solution – 7 Days of Docker

Development / Deployment / Docker

If you’re looking for an efficient and streamlined way to integrate mosparo, an open-source spam protection solution, into your workflow, running it via Docker is an excellent choice. Docker allows you to deploy mosparo quickly without worrying about dependencies or manual configurations. In this guide, we’ll walk through setting up mosparo with Docker. Prerequisites Before getting […]

…

Alexander

I am a full-stack developer. My expertise include:

Server, Network and Hosting Environments
Data Modeling / Import / Export
Business Logic
API Layer / Action layer / MVC
User Interfaces
User Experience
Understand what the customer and the business needs

I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.