iPanorama – Using Banners for Information.

This entry is part 8 of 8 in the series iPanorama

Adding a “Banner” to an iPanorama 360° may be useful for adding static information. It does not move when the actual image is panned.

Adding this code will create a banner. The settings can be tweaked to suit specific types of information, colors, etc.

Add the following to the “Custom CSS” field.

/* Start of Banner Custom CSS Code */
.ipnrm-scene-banner {
transition: all 0.5s;
transform: translate(0,-100%);
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 15px 20px;
background: #808080;
.ipnrm-scene-banner.active {
transform: translate(0,0);

.ipnrm-scene-banner .title {
color: #FFFFFF;
line-height: 20px;
font-size: 18px;
font-family: arial;
font-weight: 600;
margin: 5px 0;

.ipnrm-scene-banner .altitude {
color: #FFFFFF;
/*text-align: right;*/
line-height: 20px;
font-size: 17px;
font-family: arial;
font-weight: 400;
margin: 5px 0;

.ipnrm-scene-banner .description {
color: #FFFFFF;
/*text-align: center;*/
line-height: 20px;
font-size: 16px;
font-family: arial;
font-weight: 200;
margin: 5px 0;
/* End of CSS banner code*/

Add the following into the “Custom JS” field.

/* Start of Banner Custom JS Code */
var instance = this,
$ = jQuery;
var $banner = $(‘<div>’).addClass(‘ipnrm-scene-banner’);
instance.$container.on(‘ipanorama:scene-before-load’, function(e, data) {
instance.$container.on(‘ipanorama:scene-after-load’, function(e, data) {
var scene = data.scene;
if(!scene) return;
if(scene.cfg.userData) {
try {
var data = JSON.parse(scene.cfg.userData);
data.title && $(‘<div>’).append(data.title).addClass(‘title’).appendTo($banner);
data.altitude && $(‘<div>’).append(data.altitude).addClass(‘altitude’).appendTo($banner);
data.description && $(‘<div>’).append(data.description).addClass(‘description’).appendTo($banner);
} catch(ex) {}

/* End of JS banner code*/

2023-01-24 Cabelas Water Tower in Dundee

Dundee MI – Cabelas Water Tower in 3D

Just for fun. There is a large Cabela’s sporting goods store in Dundee Michigan. It has the large bronze statue of two grizzly’s, and also had painted the local water tower with their logo.

The sun was really bright this day, which isn’t so good for photos. The water tower was very underexposed when looking into the sun so did not get details at all on the north side.


Ann Arbor Water Tower in 3D

I went to check height of tower for future flight planning, but went ahead and got some photos while I was there. Hopefully if I do a better structured flight I will get better results. This seems sort of “lumpy”.

2022 Honda Passport in 3D using LIDAR

It was getting late in evening, overcast, it had been snowing as you can see by the snow on the SUV. Windows appear to be a little problem, not enough “bounce” for LIDAR to work well I guess. I also need a ladder to get high enough to capture the roof… or get the drone out and do some fly overs! Try again on a better day, but I was anxious to see what I could get using the Apple iPhone 14 Pro Max.