It looks like this when previewed in the WP Editor.
Using a Cube image in iPanorama. Seems several issues may come in. While not intuitive, there are 2 “cube” types in the iPanorama drop down. Try them both, but this one use the
Started with this image.
Use the ‘Type cue (1 texture) option.
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*/
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.
Lighting wasn’t the best, to bright of sunshine! Also couldn’t get a low as I wanted because of people walking around. May try to get some “fill in” shots by hand if I get back there.
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”.