iPanorama – Using Banners for Information.

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.append($banner);
instance.$container.on(‘ipanorama:scene-before-load’, function(e, data) {
$banner.removeClass(‘active’);
});
instance.$container.on(‘ipanorama:scene-after-load’, function(e, data) {
var scene = data.scene;
if(!scene) return;
$banner.empty();
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);
$banner.addClass(‘active’);
} catch(ex) {}
}
});

/* End of JS banner code*/