JavaScript Documentation
Documentation for the JavaScript version, API and overall JavaScript implementation.
Getting Started
Easy Virtual Tour Builder lets you create interactive virtual tours from equirectangular 360 panoramas in JPG, PNG, or KTX2 format. You can connect multiple scenes, add hotspots/markers, display tooltips and rich info windows, open links, trigger camera moves, and build smooth guided navigation for any space.
It is built with modern EcmaScript6, plain JavaScript, and CSS, with no external dependencies.
Please note that it will not work locally. It must run on an HTTP or HTTPS server.
Because the panoramas are loaded and rendered in the browser, it is important to optimize your images before publishing. Keep file sizes as low as possible without sacrificing too much visual quality, and compress your assets using a tool like tinypng.com.
If you are planning to use textures larger than 8k, it is recommended to test performance on your target devices and use the KTX2 format.
Easy Virtual Tour Builder is built with vanilla JavaScript, so it can also be integrated into frameworks and libraries such as React.
Installation
In the build folder there are multiple .html files that can be used as reference to copy and paste the HTML and JavaScript code, I have used the start.html file as reference for this documentation, video tutorial
Copy the content folder, environmentMaps folder, media folder, models folder and src folder in the same folder where you have the HTML file where you want to use the viewer, this folders can be added anywhere on the server but is best to keep them relative to your main HTML file.
Include the viewer CSS file and JavaScript in the header:
<head>
<!-- ... -->
<link rel="stylesheet" type="text/css" href="./content/global.css"/>
<script type='text/javascript' src="./src/FWDEVTB.js"></script>
<!-- ... -->
</head>
The next step is to add the initialize code in the page header or footer after the inclusion of the viewer JavaScript and CSS files.
<script>
if(document.readyState == 'complete'){
initEVTB();
}else{
document.addEventListener('DOMContentLoaded', ()=>{
initEVTB();
});
}
window['initEVTB'] = function(){
new FWDEVTB({
// General settings.
instance: 'fwdevtb0',
texturesFolder: 'content/markers/',
data: 'apartment_b001',
displayType: 'responsive',
parentId: 'myDiv',
posterSource: '',
startAtScene: 'Access Entry',
maxWidth: 1280,
startResizingWidth: 1000,
maxHeight: 850,
autoScale: 'yes',
initializeWhenVisible: 'yes',
lightboxCloseButtonWidth: 30,
lightboxCloseButtonHeight: 30,
lightboxCloseButtonBackgroundNormalColor: "#21A80B",
lightboxCloseButtonBackgroundSelectedColor: "#FFFFFF",
lightboxCloseButtonIconNormalColor: "#FFFFFF",
lightboxCloseButtonIconSelectedColor: "#21A80B",
lightboxBackgroundColor: 'rgba(0, 0, 0, .7)',
backgroundColor: '#FFFFFF',
fullscreenBackgroundColor: '#FFFFFF',
// Preloader.
preloaderText: 'Loading Appartment B001: ',
preloaderPosition: 'center',
preloaderOffsetX: 0,
preloaderOffsetY: 0,
showPreloaderProgressBar: 'yes',
preloaderWidth: '40%',
preloaderProgressBarBackgroundColor: '#8b859b',
preloaderProgressBarFillColor: '#f74300',
preloaderFontColor: '#000000',
preloaderBackgroundColor: 'rgba(255, 255, 255, 1)',
// Controller.
buttons: 'tableOfContent, play, zoomout, zoomin, info, help,share, fullscreen',
buttonsToolTips: 'Table of content/Table of content off, Play/Pause, Zoom out, Zoom in, Info, Help, share, Full screen/Normal screen',
showButtonsLabels: 'yes',
showBlockTouchButton: 'yes',
blockTouchButtonSize: 40,
hideControllerDelay: 4,
buttonSize: 30,
startAndEndButtonsHorizontalGap: 16,
startAndEndButtonsVerticalGap: 7,
spaceBetweenButtons: 8,
controllerOffsetY: 24,
buttonsToolTipOffsetY: 6,
buttonsIconNormalColor: '#888888',
buttonsIconSelectedColor: '#FFFFFF',
buttonToolTipBackgroundColor: "#FFFFFF",
buttonToolTipTextColor: "#000000",
controllerBackgrondColor: 'rgba(33,32,32, 0.9)',
// Share.
shareButtons:['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger'],
shareBackgroundColor:"#212020",
shareText:"Share via",
shareTextColor: '#FFFFFF',
shareLineSeparatorColor: '#3A3A3A',
// Orbital controls.
enableOrbitalControls: 'yes',
zoomFactor: 1.3,
zoomSpeed: .15,
dampingFactor: 0.2,
orbitRotateSpeed: 0.25,
autoRotate: 'no',
autoRotateSpeed: 0.6,
enableMouseWheelZoom: 'yes',
enableKeboardRoation: 'yes',
zoomMinDistance: 0,
zoomMaxDistance: 4.14,
horizontalRotationMaxAngle: 180,
horizontalRotationMinAngle: -180,
verticalRotationMinAngle: 0,
verticalRotationMaxAngle: 180,
// Table of content.
tableOfContentText: 'Apartment B001',
tableOfContentPosition: 'left',
tableOfContentTextColor: '#FFFFFF',
tableOfContentWidth: 300,
tableOfContentTextNormalColor: '#D9D9D9',
tableOfContentTextSelectedColor: '#7FDC23',
tableOfContentBackgroundColor: 'rgba(33,32,32, 0.9)',
// Markers & camera positions.
showMarkerTool: 'yes',
showMarkerEveryTimeWhenOnScreen: 'yes',
markerShowAndHideAnimationType: 'scale',
markerToolTipOffsetY: 10,
markerToolTipAndWindowBackgroundColor: '#FFFFFF',
markerPositionCopiedText: 'Marker position copied to colipboard!',
cameraPositionCopiedText: 'Camera position copied to colipboard!',
showCameraPositionsSelectMenu: 'yes',
cameraPostionsSelectMenuDefaultText: 'Access Entry',
cameraPostitionSelectMenuMaxWidth: 240,
cameraPostitionSelectMenuHeight: 44,
cameraPostitionSelectMenuStartAndEndGap: 8,
cameraPostitionSelectMenuButtonSize: 30,
cameraPostionsSelectMenuBackgroundColor: 'rgba(33,32,32, 0.9)',
cameraPostionsSelectMenuTextColor: '#FFFFFF',
cameraPositionsNextButtonTooltip: 'Next room',
cameraPositionsPrevButtonTooltip: 'Previous room',
cameraPostionsSelectMenuButtonNormalColor: '#888888',
cameraPostionsSelectMenuButtonSelectedColor: '#FFFFFF',
cameraPositionsSelectItemsMaxWidth: 350,
cameraPositionsSelectItemHeight: 24,
cameraPositionsSelectItemStartLeftGap: 6,
cameraPositionsSelectItemStartRightGap: 30,
cameraPositionsSelectItemVerticalGap: 16,
cameraPositionsSelectSpaceBetweenItems: 8,
cameraPositionsSelectMaxItems: 5,
cameraPositionsSelectItemBackgroundColor: 'rgba(33,32,32, 0.9)',
cameraPositionsSelectItemsScrollBarTrackColor: '#D9D9D9',
cameraPositionsSelectItemsScrollBarHandlerNormalColor: '#767676',
cameraPositionsSelectItemsScrollBarHandlerSelectedColor: '#FFFFFF',
cameraPositionsSelectItemNormalColor: '#D9D9D9',
cameraPositionsSelectItemSelectedColor: '#7FDC23',
// Info window.
infoWindowData: 'info_window_data',
infoWindowWidth: 1080,
infoWindowMainBackgroundColor: 'rgba(255, 255, 255, .7)',
closeButtonSize: 27,
closeButtonHeight: 27,
closeButtonBackgroundNormalColor: "#f74300",
closeButtonBackgroundSelectedColor: "#21a80b",
closeButtonIconNormalColor: "#FFFFFF",
closeButtonIconSelectedColor: "#FFFFFF",
infoWindowBackgroundColor:"#FFFFFF",
infoWindowScrollBarColor:"#8b859b",
// Navigator window.
floorMapWindowImagePath: './media/images/map.jpg',
floorMapWindowBackgroundColor: 'rgba(33,32,32, 0.9)',
floorMapWindowWidth: 300,
floorMapWindowBorderSize: 2,
floorMapWindowGap: 20,
floorMapWindowBorderColor: 'rgba(33,32,32, 0.9)',
floorMapMarkerPositionCopiedText: 'Navigation marker position copied to clipboard!',
floorMapOrientationIconColor: '#f74300',
floorMapMarkerRadius: 8,
floorMapMarkerShowIconAnimation: "yes",
floorMapMarkerIconAnimationColor: "#f74300",
floorMapMarkerBorderColor: "#FFFFFF",
floorMapMarkerBorderSelectedColor: "#f74300",
floorMapMarkerBackgroundColor: "#f74300",
floorMapMarkerBackgroundSelectedColor: "#FFFFFF",
floorMapMarkerIconColor: "#FFFFFF",
floorMapMarkerIconSelectedColor: "#f74300",
activeNavigatorMarkerIconAnimationColor: "#21a80b",
activeNavigatorMarkerBorderColor: "#FFFFFF",
activeNavigatorMarkerBorderSelectedColor: "#21a80b",
activeNavigatorMarkerBackgroundColor: "#21a80b",
activeNavigatorMarkerBackgroundSelectedColor: "#FFFFFF",
activeNavigatorMarkerIconColor: "#FFFFFF",
activeNavigatorMarkerIconSelectedColor: "#21a80b",
floorMapMarkerScale: "1.3",
showNavigatorExpandButton: 'yes',
floorMapExpandButtonPosition: 'topLeft',
floorMapExpandButtonToolTip: 'Expand floor plan navigator/Collapse floor plan navigator',
// Help screen.
helpScreenText: 'Help',
mouseRotateAndZoomText: 'Rotate And Zoom',
mouseRotateAndZoomInfo: 'Use the left mouse click to rotate and mousewheel to zoom.',
mousePanText: 'Pan With Mouse',
mousePanInfo: 'Use the right click mouse button to pan.',
keyboardPanText: 'Rotate With Keyboard',
keyboardPanInfo: 'Use the the left, right, up, down keyboard keys to rotate.',
touchRotateText: 'Rotate',
touchRotateInfo: 'Use one finger to rotate.',
touchPanText: 'Pan',
touchPanInfo: 'Use two fingers to pan.',
helpScreenIconColor: '#21A80B',
// GUI settings.
showGUI: 'yes',
closeGUIWhenNotHit: 'no',
modelScaleOffsetMin: 0,
modelScaleOffsetMax: 1,
});
}
</script>
The last step adding the viewer is to create a div with an unique ID that will act as the parent/holder for the viewer and set the parentId option to point to the div id ex: parentId: 'myDiv', this div can be added anywhere in your page.
<!-- Viewer holder. -->
<div id="myDiv"></div>
To add multiple viewers just redo the steps explained above and make sure to change the instance to fwdevtb1, fwdevtb2, fwdevtb3, etc... depending on how many viewers are added, also change the parentId to a different ID.
Please read the settings section to understand the viewer configuration options.
Add your own tour
To add your own virtual tour, create a hidden div with a unique id and assign that id to the data option. This container holds all the scenes in your tour, and each child div inside it represents one panorama.
Each scene can define its own name, desktop image, optional mobile image, starting camera position, and optional navigator position. You can start with only the scene structure shown below, then add markers later if needed.
<script>
<!-- ... -->
data: 'apartment_b001',
<!-- ... -->
</script>
<div id="apartment_b001" style="display: none;">
<div data-name="Access Entry"
data-image-path="media/images/access-entry.jpg"
data-image-mobile-path="media/images/access-entry-mobile.jpg"
data-camera-position="x:0.8738958445043025, y:0.20406089285214418, z:-0.4373896032382343, tx:0, ty:0, tz:0"
data-navigator-window-position="x:115, y:169">
</div>
<div data-name="Laundry room"
data-image-path="media/images/laundry.jpg"
data-image-mobile-path="media/images/laundry.jpg"
data-camera-position="x:0.15948717162880224, y:0.13407380794015267, z:-0.9536894757861253, tx:0, ty:0, tz:0"
data-navigator-window-position="x:23, y:147">
</div>
</div>
The data-image-path attribute sets the panorama image for that scene, data-image-mobile-path can be used for a mobile-specific version, data-camera-position sets the starting view, and data-navigator-window-position is used if you want to show that scene in the floor plan navigator, video tutorial.
Below is a detailed description of the scene data structure:
- data - the viewer option that points to the hidden div containing your full tour structure. The value must match the id of the wrapper that stores all scenes, for example data: 'apartment_b001'.
- data-name - the scene name. This is the label used internally to identify the panorama and it can also appear in interface elements such as the table of contents, scene navigation, or camera position selectors depending on how the tour is configured. Each scene name should be unique.
- data-image-path - the main panorama image path for that scene. This can be a relative or absolute path and it represents the default image loaded for desktop or for any case where a separate mobile panorama is not provided.
- data-image-mobile-path - the optional mobile panorama image path. This is useful for optimization on phones and tablets because you can provide a lighter, smaller, better-compressed version of the same panorama instead of loading the full desktop image on mobile devices. Using a dedicated mobile image helps reduce bandwidth usage, improves loading speed, lowers memory usage, and makes navigation feel smoother on lower-powered devices. If you do not need a separate mobile image, you can use the same path as the desktop version.
- data-camera-position - the starting camera view for that specific scene. This controls the initial direction the visitor sees when the panorama opens, allowing you to present the most important angle first and keep transitions between rooms feeling natural and intentional. To get this value, enable the built-in marker tool by setting showMarkerTool: 'yes', then open the tour and move the camera to the exact view you want to use as the starting position. Right click inside the scene and the viewer will copy the generated camera position to the clipboard. Paste that full value into the data-camera-position attribute for the scene.
- data-navigator-window-position - the scene position inside the floor plan navigator, formatted as x and y coordinates. Use this if the floor map window is enabled and you want each panorama to be represented in the correct place on the map so visitors can understand where they are inside the tour. To get this value, enable the built-in marker tool by setting showMarkerTool: 'yes', then open the tour and make sure the floor map navigator is visible. Left click on the exact point inside the floor map image where that scene should appear and the viewer will copy the generated x and y coordinates to the clipboard. Paste that full value into the data-navigator-window-position attribute for the scene.
Setup Info Window
The main info window is a separate panel that can be opened from the controller info button. It is useful for showing general tour content such as project details, descriptions, images, videos, maps, contact details, or any other custom HTML content that should be available independently from the scene markers.
To use it, create a hidden div with a unique id and assign that id to the infoWindowData option. Inside that wrapper you can add any HTML structure you need, including columns, images, text blocks, embedded video, links, and custom styled sections.
<script>
<!-- ... -->
infoWindowData: 'info_window_data',
<!-- ... -->
</script>
<div id="info_window_data" style="display: none;">
<div class="one">
<img src="media/images/map-small2.jpg">
<h1>Image On The Left Side</h1>
<p>Add here your HTML content that appears in the main info window.</p>
</div>
<div class="spacer"></div>
<div class="two">
<img src="media/images/map-small3.jpg">
<h1>Image On The Right Side</h1>
<p>You can add multiple sections, images, text blocks, links, and custom layouts.</p>
</div>
<div class="spacer"></div>
<div class="three">
<h1>Video & Youtube Ready</h1>
<div class="youtube">
<iframe data-fwdevtb-src="https://www.youtube.com/embed/pGdzdBB4SYk?fs=0" frameborder="0" width="100%" loading="lazy" allowfullscreen></iframe>
</div>
<p>The info window supports rich responsive HTML content.</p>
</div>
</div>
The content is parsed directly from the hidden wrapper, so you can fully control the layout and styling with HTML and CSS. This makes the main info window ideal for tour introductions, property details, product presentations, specifications, branded content, and any longer descriptive material you want users to open on demand.
Working with markers
To add markers, place them inside the scene div where you want them to appear. Each marker is added directly inside a panorama item from your main data structure, and you can add as many markers as needed for navigation, links, info panels, videos, images, and other interactive content.
<script>
<!-- ... -->
data: 'apartment_b001',
<!-- ... -->
</script>
<div id="apartment_b001" style="display: none;">
<div data-name="Access Entry"
data-image-path="media/images/access-entry.jpg"
data-image-mobile-path="media/images/access-entry-mobile.jpg"
data-camera-position="x:0.8738958445043025, y:0.20406089285214418, z:-0.4373896032382343, tx:0, ty:0, tz:0"
data-navigator-window-position="x:115, y:169">
<div
data-marker=""
data-go-to-scene-name="Kitchen"
data-class = ""
data-position = "x:-3.750029714583942, y:-1.348394644397774, z:3.2368691192474963, nx:-3.7873481162481193, ny:-1.3623265676797576, nz:3.267088953973981"
data-icon-type = "up"
data-show-icon-animation = "yes"
data-icon-animation-color = "#21a80b"
data-border-color = "#FFFFFF"
data-border-selected-color = "#21a80b"
data-background-color = "#21a80b"
data-background-selected-color = "#FFFFFF"
data-icon-color = "#FFFFFF"
data-icon-selected-color = "#21a80b"
data-scale = "1.4"
data-tooltip-offset-x = "0"
data-link = ""
data-target = "">
<div data-tooltip="" data-max-width="300">
<img src="media/images/thumbnails/kitchen.jpg" alt="Kitchen">
<p>Go to kitchen.</p>
</div>
</div>
</div>
</div>
Below is a detailed description of all parameters:
- data-marker - marks that div as a tour marker. This attribute is required so the viewer knows that the element should be parsed and displayed as an interactive hotspot inside the current scene.
- data-go-to-scene-name - the target scene name that should open when the marker is clicked. The value must match the data-name of another scene exactly. If you leave this blank, the marker will not trigger scene navigation.
- data-class - an optional custom CSS class name added to the marker. Use it when you want to style a specific marker differently from the others with your own CSS rules.
- data-position - the marker position inside the panorama. To get this value, first enable the built-in marker tool by setting showMarkerTool: 'yes' in the viewer settings. After that, open the tour and left click on the exact point in the scene where you want to place the marker. The viewer will copy the generated position to the clipboard, including the x, y, z coordinates and the normal values nx, ny, and nz. Paste that full value into the data-position attribute to place the marker in that location.
- data-icon-type - the marker icon type. In the current virtual tour setup it can be directional icons such as up, down, left, right, or content/action icons such as plus, plusPointer, link, linkPointer, infoPointer, and playPointer. Use the directional icons mainly for room-to-room navigation and the others for links, tooltips, videos, images, and info windows.
- data-show-icon-animation - this can be yes or no. It enables or disables the icon animation effect, which is useful when you want important navigation markers or highlighted points of interest to stand out more clearly.
- data-icon-animation-color - the color used by the animated icon effect when icon animation is enabled. This can be hex, rgb, or rgba depending on the styling you want.
- data-border-color - the marker border normal color, hex, rgb, or rgba.
- data-border-selected-color - the marker border selected or active color, hex, rgb, or rgba.
- data-background-color - the marker background normal color, hex, rgb, or rgba.
- data-background-selected-color - the marker background selected or active color, hex, rgb, or rgba.
- data-icon-color - the marker icon normal color, hex, rgb, or rgba.
- data-icon-selected-color - the marker icon selected or active color, hex, rgb, or rgba.
- data-scale - the marker scale factor. A value of 1 is the default size, 1.4 makes the marker 140% larger, 2 makes it 200% larger, and so on. This is useful when you want major navigation markers to be more prominent than secondary detail markers.
- data-tooltip-offset-x - the tooltip horizontal offset in pixels. Use it when you need to shift the tooltip slightly left or right to improve alignment or avoid covering important parts of the panorama.
- data-link - the URL to open when the marker is clicked. Use this for external pages, product pages, booking links, or any other destination. If you do not want the marker to open a link, leave it blank.
- data-target - controls how the link opens. Use _self to open it in the same tab or _blank to open it in a new tab. If the marker is not used as a link, this can remain blank.
Marker tooltip window
Easy Virtual Tour Builder can have a tooltip window associated with it, this tooltip window appears when the marker is hovered/active or when an animation and/or tween camera has finished. It has full support for HTML elements like video/audio and any HTML tag and it can be easily formatted using the global.css file that comes with this viewer, video tutorial.
To add a tootip window for the marker add a div with two attributes one is the data-tooltip = "" attrinute that is used by the viewer as a refference to parse the HTML markup and the other one is the data-max-width = "380" that represents the maximum viewer window width in px. This div must be added inside the marker HTML markup.
<div id="markers_data" style="display: none;">
<div data-class = ""
data-position = "x:0, y:0,, z:0,, nx:0,, ny:0, nz:0, meshName: none" ...>
<div data-tooltip = "" data-max-width = "380">
<p>Add here your HTML content that appears in the tooltip window!</p>
</div>
</div>
Marker info window
The info window works the same way as the tooltip window with the exception that it can have unlimited HTML content, if the content does not feet the info window a scrollbar will appear to scroll the content, also the info window is opened when clicking on the marker or when an animation and/or tween camera has finished, video tutorial.
To add a info window for the marker add a div with the attribute data-info = "" attrinute that is used by the viewer as a refference to parse the HTML markup. This div must be added inside the marker HTML markup.
<div id="markers_data" style="display: none;">
<div data-class = ""
data-position = "x:0, y:0,, z:0,, nx:0,, ny:0, nz:0, meshName: none" ...>
<div data-info = "">
<p>Add here your HTML content that appears in the info window!</p>
</div>
</div>
Floor map
The floor map is an optional navigator window that helps visitors understand where they are inside the virtual tour and move through the space more easily. It is especially useful for multi-room tours because it adds a clear visual reference for orientation and makes the navigation feel more intuitive.
To use it, set the floor map image in the viewer settings and define a data-navigator-window-position for each scene. The floor map image acts as the background, while the scene coordinates determine where each room or area is displayed on that map.
<script>
<!-- ... -->
floorMapWindowImagePath: './media/images/map.jpg',
floorMapWindowBackgroundColor: 'rgba(33,32,32, 0.9)',
floorMapWindowWidth: 300,
floorMapWindowBorderSize: 2,
floorMapWindowGap: 20,
floorMapWindowBorderColor: 'rgba(33,32,32, 0.9)',
floorMapMarkerPositionCopiedText: 'Navigation marker position copied to clipboard!',
floorMapOrientationIconColor: '#f74300',
floorMapMarkerRadius: 8,
floorMapMarkerShowIconAnimation: 'yes',
floorMapMarkerIconAnimationColor: '#f74300',
floorMapMarkerBorderColor: '#FFFFFF',
floorMapMarkerBorderSelectedColor: '#f74300',
floorMapMarkerBackgroundColor: '#f74300',
floorMapMarkerBackgroundSelectedColor: '#FFFFFF',
floorMapMarkerIconColor: '#FFFFFF',
floorMapMarkerIconSelectedColor: '#f74300',
activeNavigatorMarkerIconAnimationColor: '#21a80b',
activeNavigatorMarkerBorderColor: '#FFFFFF',
activeNavigatorMarkerBorderSelectedColor: '#21a80b',
activeNavigatorMarkerBackgroundColor: '#21a80b',
activeNavigatorMarkerBackgroundSelectedColor: '#FFFFFF',
activeNavigatorMarkerIconColor: '#FFFFFF',
activeNavigatorMarkerIconSelectedColor: '#21a80b',
floorMapMarkerScale: '1.3',
showNavigatorExpandButton: 'yes',
floorMapExpandButtonPosition: 'topLeft',
floorMapExpandButtonToolTip: 'Expand floor plan navigator/Collapse floor plan navigator',
<!-- ... -->
</script>
<div id="apartment_b001" style="display: none;">
<div data-name="Access Entry"
data-image-path="media/images/access-entry.jpg"
data-image-mobile-path="media/images/access-entry-mobile.jpg"
data-camera-position="x:0.8738958445043025, y:0.20406089285214418, z:-0.4373896032382343, tx:0, ty:0, tz:0"
data-navigator-window-position="x:115, y:169">
</div>
<div data-name="Laundry room"
data-image-path="media/images/laundry.jpg"
data-image-mobile-path="media/images/laundry.jpg"
data-camera-position="x:0.15948717162880224, y:0.13407380794015267, z:-0.9536894757861253, tx:0, ty:0, tz:0"
data-navigator-window-position="x:23, y:147">
</div>
</div>
The floorMapWindowImagePath option sets the floor plan image, while each data-navigator-window-position value places a scene marker on that map using x and y coordinates. To get that value, enable the built-in marker tool with showMarkerTool: 'yes', open the tour, make sure the floor map navigator is visible, and left click on the exact point inside the floor plan where you want that scene marker to appear. The viewer will copy the generated x and y coordinates to the clipboard, and you can paste that full value into the data-navigator-window-position attribute. When visitors switch scenes, the active floor map marker updates automatically so they can always see their current location.
You can also fully style the navigator markers, active state, border colors, icon colors, scale, background, and expand button behavior to match the design of your tour.
Open in lightbox
To open Easy Virtual Tour Builder in a lightbox is done by setting the displayType:"lightbox", in the build folder there is a HTML file lightbox.html you can use this file as reference, video tutorial.
<script>
<!-- ... -->
displayType: 'lightbox',
<!-- ... -->
</script>
Settings
Easy Virtual Tour Builder has many options that allows to customize its features. They are added directly in the viewer constructor as it can be seen in the installation section.
Example
<script type="text/javascript">
if(document.readyState == 'complete'){
initEVTB();
}else{
document.addEventListener('DOMContentLoaded', ()=>{
initEVTB();
});
}
window['initEVTB'] = function(){
new FWDEVTB({
// General settings.
instance: 'fwdevtb0',
texturesFolder: 'content/markers/',
data: 'apartment_b001',
displayType: 'responsive',
parentId: 'myDiv',
posterSource: '',
startAtScene: 'Access Entry',
etc...
})
}
</script>
The list below documents the current virtual tour settings used by Easy Virtual Tour Builder. Legacy 3D model viewer options have been removed from this section.
instance
Type: (String)
The global viewer instance name used to access the API. If you add multiple tours on the same page, each one must use a unique instance value such as fwdevtb0, fwdevtb1, and so on.
texturesFolder
Type: (String)
The path to the folder that stores the marker and interface graphic assets used by the tour.
data
Type: (String)
The id of the hidden wrapper that contains your full tour data structure. This must match the wrapper explained in the Add your own tour section, for example data: 'apartment_b001'.
displayType
Type: (String)
Controls how the tour is displayed. Use responsive to size it with maxWidth and maxHeight, afterparent to follow the parent container size, or lightbox to open it in a popup.
parentId
Type: (String)
The id of the div that will hold the tour on the page.
posterSource
Type: (String)
An optional poster image shown before the tour is fully initialized. Leave it blank if you do not need a poster.
startAtScene
Type: (String)
The scene name that should open first. The value must match one of your scene data-name attributes exactly.
maxWidth
Type: (Number)
The maximum tour width in pixels when using the responsive display mode.
startResizingWidth
Type: (Number)
The width threshold where the responsive height adjustments begin. This works together with autoScale.
maxHeight
Type: (Number)
The maximum tour height in pixels.
autoScale
Type: (String)
This can be yes or no. When it is set to yes, the tour height scales automatically with the width in responsive mode.
initializeWhenVisible
Type: (String)
This can be yes or no. Use it when you want the tour to initialize only after it becomes visible in the page viewport.
lightboxCloseButtonWidth
Type: (Number)
The lightbox close button width in pixels.
lightboxCloseButtonHeight
Type: (Number)
The lightbox close button height in pixels.
lightboxCloseButtonBackgroundNormalColor
Type: (String)
The lightbox close button background color in its normal state.
lightboxCloseButtonBackgroundSelectedColor
Type: (String)
The lightbox close button background color in its selected or hovered state.
lightboxCloseButtonIconNormalColor
Type: (String)
The lightbox close button icon color in its normal state.
lightboxCloseButtonIconSelectedColor
Type: (String)
The lightbox close button icon color in its selected or hovered state.
lightboxBackgroundColor
Type: (String)
The background color behind the tour when the lightbox display type is used.
backgroundColor
Type: (String)
The main viewer background color.
fullscreenBackgroundColor
Type: (String)
The viewer background color when the tour is shown in fullscreen mode.
preloaderText
Type: (String)
The loading text shown while the tour assets are being prepared.
preloaderPosition
Type: (String)
Sets the preloader position. Common values are center, centertop, centerbottom, topleft, topright, bottomleft, and bottomright.
preloaderOffsetX
Type: (Number)
Moves the preloader horizontally from its base position.
preloaderOffsetY
Type: (Number)
Moves the preloader vertically from its base position.
showPreloaderProgressBar
Type: (String)
This can be yes or no. It shows or hides the loading progress bar.
preloaderWidth
Type: (String)
The width of the preloader, usually set as a percentage string such as 40% or 70%.
preloaderProgressBarBackgroundColor
Type: (String)
The background color of the preloader progress bar track.
preloaderProgressBarFillColor
Type: (String)
The fill color of the preloader progress bar.
preloaderFontColor
Type: (String)
The text color used by the preloader label.
preloaderBackgroundColor
Type: (String)
The background color behind the preloader text and progress area.
buttons
Type: (String)
The list of controller buttons separated by commas. The order in this string is the order shown in the interface. The current setup supports buttons such as tableOfContent, play, zoomout, zoomin, info, help, share, and fullscreen.
buttonsToolTips
Type: (String)
The tooltips for the controller buttons, separated by commas and in the same order as the buttons setting. Use / to define dual-state labels such as Full screen/Normal screen.
showButtonsLabels
Type: (String)
This can be yes or no. It shows or hides the controller tooltip labels.
showBlockTouchButton
Type: (String)
This can be yes or no. It shows the touch blocking button on supported mobile layouts.
blockTouchButtonSize
Type: (Number)
The width and height of the touch blocking button in pixels.
hideControllerDelay
Type: (Number)
The delay in seconds before the controller hides after inactivity.
buttonSize
Type: (Number)
The controller button width and height in pixels.
startAndEndButtonsHorizontalGap
Type: (Number)
The horizontal spacing at the beginning and end of the controller button row.
startAndEndButtonsVerticalGap
Type: (Number)
The vertical spacing for the controller button row.
spaceBetweenButtons
Type: (Number)
The gap between controller buttons.
controllerOffsetY
Type: (Number)
The distance from the controller to the bottom of the tour.
buttonsToolTipOffsetY
Type: (Number)
The vertical gap between the controller buttons and their tooltips.
buttonsIconNormalColor
Type: (String)
The controller icon color in its normal state.
buttonsIconSelectedColor
Type: (String)
The controller icon color in its hovered or selected state.
buttonToolTipBackgroundColor
Type: (String)
The background color used by the controller button tooltips.
buttonToolTipTextColor
Type: (String)
The text color used by the controller button tooltips.
controllerBackgrondColor
Type: (String)
The background color of the controller bar.
shareButtons
Type: (Array)
The array of social networks shown inside the share panel. If this array is empty, the share button is hidden. The currently supported platforms are facebook, twitter, linkedin, tumblr, pinterest, reddit, buffer, digg, and blogger. Example: shareButtons:['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg', 'blogger'].
shareBackgroundColor
Type: (String)
The background color of the share panel.
shareText
Type: (String)
The title text shown at the top of the share panel.
shareTextColor
Type: (String)
The color of the share panel title text.
shareLineSeparatorColor
Type: (String)
The separator line color used inside the share panel.
enableOrbitalControls
Type: (String)
This can be yes or no. It enables the main drag rotation controls for the panorama.
zoomFactor
Type: (Number)
Controls how much zoom is applied with each zoom action.
zoomSpeed
Type: (Number)
Controls the speed of the zoom animation.
dampingFactor
Type: (Number)
Controls the smoothing and inertia of the orbit movement.
orbitRotateSpeed
Type: (Number)
Controls how fast the panorama rotates while the user drags.
autoRotate
Type: (String)
This can be yes or no. It enables or disables automatic rotation.
autoRotateSpeed
Type: (Number)
Controls the speed of the automatic rotation.
enableMouseWheelZoom
Type: (String)
This can be yes or no. It enables or disables mouse wheel zoom on desktop.
enableKeboardRoation
Type: (String)
This can be yes or no. It enables or disables keyboard rotation controls.
zoomMinDistance
Type: (Number)
The minimum zoom distance allowed for the camera.
zoomMaxDistance
Type: (Number)
The maximum zoom distance allowed for the camera.
horizontalRotationMaxAngle
Type: (Number)
The maximum horizontal rotation angle in degrees.
horizontalRotationMinAngle
Type: (Number)
The minimum horizontal rotation angle in degrees.
verticalRotationMinAngle
Type: (Number)
The minimum vertical rotation angle in degrees.
verticalRotationMaxAngle
Type: (Number)
The maximum vertical rotation angle in degrees.
tableOfContentText
Type: (String)
The main title text shown at the top of the table of contents panel.
tableOfContentPosition
Type: (String)
The side where the table of contents opens, usually left or right.
tableOfContentTextColor
Type: (String)
The color used by the main table of contents title text.
tableOfContentWidth
Type: (Number)
The width of the table of contents panel in pixels.
tableOfContentTextNormalColor
Type: (String)
The color of the scene names in their normal state inside the table of contents.
tableOfContentTextSelectedColor
Type: (String)
The color of the active or selected scene name in the table of contents.
tableOfContentBackgroundColor
Type: (String)
The background color of the table of contents panel.
showMarkerTool
Type: (String)
This can be yes or no. It enables the built-in helper used to copy marker positions with left click, camera positions with right click, and floor map navigator positions by left clicking inside the floor map.
showMarkerEveryTimeWhenOnScreen
Type: (String)
This can be yes or no. It controls whether markers animate back into view whenever they re-enter the visible part of the panorama.
markerShowAndHideAnimationType
Type: (String)
The animation type used when markers appear or disappear. Common values are scale and opacity.
markerToolTipOffsetY
Type: (Number)
The vertical offset used for marker tooltips.
markerToolTipAndWindowBackgroundColor
Type: (String)
The shared background color used by marker tooltips and marker info windows.
markerPositionCopiedText
Type: (String)
The confirmation message shown after a marker position is copied from the scene.
cameraPositionCopiedText
Type: (String)
The confirmation message shown after a camera position is copied from the scene.
showCameraPositionsSelectMenu
Type: (String)
This can be yes or no. It shows or hides the scene selection menu used to jump between viewpoints or rooms.
cameraPostionsSelectMenuDefaultText
Type: (String)
The default label shown by the camera positions selector before the dropdown is opened.
cameraPostitionSelectMenuMaxWidth
Type: (Number)
The maximum width of the camera positions selector.
cameraPostitionSelectMenuHeight
Type: (Number)
The height of the camera positions selector.
cameraPostitionSelectMenuStartAndEndGap
Type: (Number)
The left and right padding used inside the camera positions selector.
cameraPostitionSelectMenuButtonSize
Type: (Number)
The size of the previous and next buttons used by the camera positions selector.
cameraPostionsSelectMenuBackgroundColor
Type: (String)
The background color of the camera positions selector.
cameraPostionsSelectMenuTextColor
Type: (String)
The text color used by the camera positions selector.
cameraPositionsNextButtonTooltip
Type: (String)
The tooltip text for the next scene button in the camera positions selector.
cameraPositionsPrevButtonTooltip
Type: (String)
The tooltip text for the previous scene button in the camera positions selector.
cameraPostionsSelectMenuButtonNormalColor
Type: (String)
The normal icon color of the camera positions selector buttons.
cameraPostionsSelectMenuButtonSelectedColor
Type: (String)
The selected or hovered icon color of the camera positions selector buttons.
cameraPositionsSelectItemsMaxWidth
Type: (Number)
The maximum width of the scene list shown by the camera positions selector.
cameraPositionsSelectItemHeight
Type: (Number)
The height of each item in the camera positions selector list.
cameraPositionsSelectItemStartLeftGap
Type: (Number)
The left padding used by each item in the camera positions selector list.
cameraPositionsSelectItemStartRightGap
Type: (Number)
The right padding used by each item in the camera positions selector list.
cameraPositionsSelectItemVerticalGap
Type: (Number)
The vertical spacing inside each camera positions selector item.
cameraPositionsSelectSpaceBetweenItems
Type: (Number)
The space between the items in the camera positions selector list.
cameraPositionsSelectMaxItems
Type: (Number)
The maximum number of visible items shown before the selector list becomes scrollable.
cameraPositionsSelectItemBackgroundColor
Type: (String)
The background color of each scene item in the camera positions selector list.
cameraPositionsSelectItemsScrollBarTrackColor
Type: (String)
The track color of the scrollbar used by the camera positions selector list.
cameraPositionsSelectItemsScrollBarHandlerNormalColor
Type: (String)
The normal color of the scrollbar handle used by the camera positions selector list.
cameraPositionsSelectItemsScrollBarHandlerSelectedColor
Type: (String)
The selected color of the scrollbar handle used by the camera positions selector list.
cameraPositionsSelectItemNormalColor
Type: (String)
The normal text color of the scene items in the camera positions selector list.
cameraPositionsSelectItemSelectedColor
Type: (String)
The selected text color of the active scene item in the camera positions selector list.
infoWindowData
Type: (String)
The id of the hidden wrapper that contains the main info window HTML content.
infoWindowWidth
Type: (Number)
The maximum width of the main info window in pixels.
infoWindowMainBackgroundColor
Type: (String)
The overlay background color shown behind the info window.
closeButtonSize
Type: (Number)
The width of the info window close button.
closeButtonHeight
Type: (Number)
The height of the info window close button.
closeButtonBackgroundNormalColor
Type: (String)
The normal background color of the info window close button.
closeButtonBackgroundSelectedColor
Type: (String)
The selected or hovered background color of the info window close button.
closeButtonIconNormalColor
Type: (String)
The normal icon color of the info window close button.
closeButtonIconSelectedColor
Type: (String)
The selected or hovered icon color of the info window close button.
infoWindowBackgroundColor
Type: (String)
The background color of the info window content panel.
infoWindowScrollBarColor
Type: (String)
The scrollbar color used inside the info window when the content is scrollable.
floorMapWindowImagePath
Type: (String)
The path to the floor plan image used by the navigator window. If this is empty, the navigator window is not shown.
floorMapWindowBackgroundColor
Type: (String)
The background color behind the floor map image.
floorMapWindowWidth
Type: (Number)
The width of the floor map navigator window in pixels.
floorMapWindowBorderSize
Type: (Number)
The border size of the floor map navigator window in pixels.
floorMapWindowGap
Type: (Number)
The spacing between the floor map navigator and the edge of the tour.
floorMapWindowBorderColor
Type: (String)
The border color of the floor map navigator window.
floorMapMarkerPositionCopiedText
Type: (String)
The confirmation message shown after a floor map marker position is copied from the navigator window.
floorMapOrientationIconColor
Type: (String)
The color of the orientation indicator shown on the floor map for the current scene.
floorMapMarkerRadius
Type: (Number)
The radius of the navigator markers placed on the floor map.
floorMapMarkerShowIconAnimation
Type: (String)
This can be yes or no. It enables or disables the icon animation used by floor map markers.
floorMapMarkerIconAnimationColor
Type: (String)
The animation color used by the floor map markers.
floorMapMarkerBorderColor
Type: (String)
The normal border color of the floor map markers.
floorMapMarkerBorderSelectedColor
Type: (String)
The selected border color of the floor map markers.
floorMapMarkerBackgroundColor
Type: (String)
The normal background color of the floor map markers.
floorMapMarkerBackgroundSelectedColor
Type: (String)
The selected background color of the floor map markers.
floorMapMarkerIconColor
Type: (String)
The normal icon color of the floor map markers.
floorMapMarkerIconSelectedColor
Type: (String)
The selected icon color of the floor map markers.
activeNavigatorMarkerIconAnimationColor
Type: (String)
The animation color used by the currently active floor map marker.
activeNavigatorMarkerBorderColor
Type: (String)
The normal border color used by the currently active floor map marker.
activeNavigatorMarkerBorderSelectedColor
Type: (String)
The selected border color used by the currently active floor map marker.
activeNavigatorMarkerBackgroundColor
Type: (String)
The normal background color used by the currently active floor map marker.
activeNavigatorMarkerBackgroundSelectedColor
Type: (String)
The selected background color used by the currently active floor map marker.
activeNavigatorMarkerIconColor
Type: (String)
The normal icon color used by the currently active floor map marker.
activeNavigatorMarkerIconSelectedColor
Type: (String)
The selected icon color used by the currently active floor map marker.
floorMapMarkerScale
Type: (String)
The scale multiplier used by the floor map markers.
showNavigatorExpandButton
Type: (String)
This can be yes or no. It shows or hides the expand button for the floor map navigator.
floorMapExpandButtonPosition
Type: (String)
The position of the floor map expand button, for example topLeft.
floorMapExpandButtonToolTip
Type: (String)
The tooltip text shown by the floor map expand button. You can define both states separated by /.
helpScreenText
Type: (String)
The main title shown at the top of the help screen.
mouseRotateAndZoomText
Type: (String)
The heading text used for the mouse rotate and zoom help block.
mouseRotateAndZoomInfo
Type: (String)
The descriptive text used for the mouse rotate and zoom help block.
mousePanText
Type: (String)
The heading text used for the mouse pan help block.
mousePanInfo
Type: (String)
The descriptive text used for the mouse pan help block.
keyboardPanText
Type: (String)
The heading text used for the keyboard rotation help block.
keyboardPanInfo
Type: (String)
The descriptive text used for the keyboard rotation help block.
touchRotateText
Type: (String)
The heading text used for the touch rotate help block.
touchRotateInfo
Type: (String)
The descriptive text used for the touch rotate help block.
touchPanText
Type: (String)
The heading text used for the touch pan help block.
touchPanInfo
Type: (String)
The descriptive text used for the touch pan help block.
helpScreenIconColor
Type: (String)
The accent color used by the help screen icons.
showGUI
Type: (String)
This can be yes or no. It enables the optional live GUI controls. This feature is typically disabled on mobile devices.
closeGUIWhenNotHit
Type: (String)
This can be yes or no. It closes the live GUI when the user clicks outside it.
modelScaleOffsetMin
Type: (Number)
The minimum value allowed by the live GUI for the scale offset control.
modelScaleOffsetMax
Type: (Number)
The maximum value allowed by the live GUI for the scale offset control.
Methods
Methods are functions that can be called via the API to execute certain actions.
JavaScript methods look like fwdevtb0.methodName( /* arguments */ ), please note that fwdevtb0 is the viewer instance name, if you are using multiple viewers don't forget to set the instance unique for each instance like this fwdevtb1, fwdevtb2, fwdevtb3, etc... depending on how many viewers are added.
zoom
.zoom(direction:String)
Zoom in or out the current panorama scene.
Parameters
- direction (String) - this can be in or out.
pan
.pan(direction:String)
Pan the current camera view.
Parameters
- direction (String) - this can be up, down, left or right.
getCameraPosition
.getCameraPosition():Object
Returns an object with the current camera position and the current controls target position using the keys cameraX, cameraY, cameraZ, controlsX, controlsY and controlsZ.
setCameraPostion
.setCameraPostion(cameraX:Number, cameraY:Number, cameraZ:Number, controlsX:Number, controlsY:Number, controlsZ:Number):void
Set the camera position and controls target programmatically. The method name is spelled setCameraPostion in the current API.
Parameters
- cameraX, cameraY, cameraZ (Number) - the new camera position.
- controlsX, controlsY, controlsZ (Number) - the new target position for the controls.
showInfoWindow
.showInfoWindow(htmlContent:String):void
Show the info window with custom HTML content. If no value is passed, the viewer uses the configured info window content.
Parameters
- htmlContent (String) - this HTML content to show in the info window.
playAutoRotate
.playAutoRotate():void
Start the panorama auto-rotation.
pauseAutoRotate
.pauseAutoRotate():void
Pause the panorama auto-rotation.
goFullScreen
.goFullScreen():void
Set the viewer in fullscreen.
goNormalScreen
.goNormalScreen():void
Set the viewer in normal screen.
goToItem
.goToItem(itemName:String):void
Go to a tour scene using the scene name defined in the data list.
Parameters
- itemName (String) - the value used in the scene data-name / item name.
destroy
.destroy():void
Destroy the viewer and remove it from the DOM.
Events
Easy Virtual Tour Builder has many events, they are added via the addEventListener method add accessed via the instance name.
The events must be registered when the API is ready.
// API.
let fwdevtbAPI = setInterval(() =>{
if(window['fwdevtb0']){
console.log('EVTB API ready')
clearInterval(fwdevtbAPI);
// Register the LOAD_PROGRESS event.
fwdevtb0.addEventListener(FWDEVTB.LOAD_PROGRESS, onLoadProgress);
}
}, 100);
// Listen for the LOAD_PROGRESS event.
function onLoadProgress(e){
console.log(e)
}
FWDEVTB.NORMAL_SCREEN
FWDEVTB.NORMAL_SCREEN
Dispatched when the viewer goes to normal screen.
FWDEVTB.FULL_SCREEN
FWDEVTB.FULL_SCREEN
Dispatched when the viewer goes in full screen.
FWDEVTB.LOAD_PROGRESS
FWDEVTB.LOAD_PROGRESS
Dispatched while the tour assets are loading. The event object contains percentLoaded.
FWDEVTB.AUTOROTATE_PLAY
FWDEVTB.AUTOROTATE_PLAY
Dispatched when the controller switches back to the play state for auto-rotation.
FWDEVTB.AUTOROTATE_PAUSE
FWDEVTB.AUTOROTATE_PAUSE
Dispatched when the controller switches to the pause state for auto-rotation.
FWDEVTB.TABLE_OF_CONTENT_ON
FWDEVTB.TABLE_OF_CONTENT_ON
Dispatched when the table of contents panel is opened.
FWDEVTB.SET_MARKER_OR_CAMERA_POSITION
FWDEVTB.SET_MARKER_OR_CAMERA_POSITION
Dispatched when the marker tool copies a value to the clipboard. The payload is available in e.event and includes position, positionType and info. The positionType can be marker, camera or floorMapMarker.
FWDEVTB.ERROR
FWDEVTB.ERROR
Dispatched when a loading or runtime error occurs. The event object contains error.
