Author Archive: GeorgeK
iPanorama Add a NADIR or ZENITH Logo
Easy enough to add.
Create your tour.
Create your Scene
In your Scene create a SHAPE.
NOTE: If you zoom in on the photo you should see handles that will allow you to directly drag the logo around where you would like it placed.
You will have to do this for each scene.
It should end up like this.
Have fun!
iPanorama Cube Image Format Test
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.
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*/
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.