VR Thumbnails Menu Plugin for Krpano & Panotour Pro for HTML5

by Jerome Boccon-Gibod - jerome@360images.fr

Description

A HTML5 plugin to add a thumbnails menu in VR mode.

• Choose to display the groups first and then the group's scenes Thumbnails or display directly all the scenes.
• If you choosed to display the groups, choose to display the group's scenes first or the groups.
• If you choosed to display the groups, choose the number of rows for the group menu (maximum 7 thumbnails by row)
• You can choose to display arrows to load previous and next scene
• You can choose to display the menu icon at any vertical value ( -45 = on the floor / +45 = in the sky)
• Your can choose the number of rows for the scenes menu (maximum 12 thumbnails by row)
• Choose the vertical space between the thumbnails
• Choose the time before clicking when overing the play button
• Choose to add or not a "Seen" icon on the scene's thumbnail already visited
• Choose to drop the menu from the top or the bottom of the screen

Download

krpano Forum Discussion Thread

Krpano VR Thumbnails Menu Plugin Thread

Screenshots

Syntax / XML Usage Example

Simple include syntax

<include url="%SWFPATH%/vrmenu/vrmenu.xml"/>

Full include syntax

<include url="%SWFPATH%/vrmenu/vrmenu.xml"/>
<vrmenu 
	angle="-45"

	groups="false"
	onlycat="false" 
	firstgroup="false"
	onlygroups="false" 
    
	displayprevnext="true" 
    
	width="240"  
	height="120"
	gpwidth="400"  
	gpheight="200"
        
	rows="1" 
	group_rows="2" 
    
	spacing="20" 
	gpspacing="50"
    
	timeout="2000"
    
	seen="true"
    
	from="-800"
    
	closevrmenu="true"
    
	fademenu="true"
	menualpha="50"
    
	add_txt_thumb="true"
	txt_thumb_css="color:#ffffff;font-family:Raleway;font-size:26px;text-align:center"
	txt_thumb_vcenter="true"
	txt_thumb_hasshadow="true" 
    
	add_txt_group="true"
	txt_group_css="color:#ffffff;font-family:Raleway;font-size:36px;text-align:center"
	txt_group_vcenter="true"
	txt_group_hasshadow="true"
    
	add_thumb_border="true"
	thumb_border_border="0 0x000000 1.00"
	thumb_border_bgcolor="0x000000"
	thumb_border_bgalpha="0"
    
	thumb_border_over_border="2 0xffffff 1.00"
	thumb_border_over_bgcolor="0x000000"
	thumb_border_over_bgalpha="0.7"       
/>

Plugin Attributes

• angle  (optionally)
  • atv of the vr menu icon
  • default=-45
• groups  (optionally)
  • organise the scenes by groups (group structure)
  • default=false
• onlycat  (optionally)
  • display first the scene's thumbnails when organized by group is enabled
  • default=false
• firstgroup  (optionally)
  • start by the group thumbnails the first time when onlycat is enabled
  • default=false
• onlygroups  (optionally)
  • display only the group's thumbnails when organized by group is enabled (will load the group main scene)
  • default=false
• displayprevnext  (optionally)
  • display previous and next scene arrows next to the menu icon
  • default=true
• width  (optionally)
  • width of the scene's thumbnails
  • default=240
• height  (optionally)
  • height of the scene's thumbnails
  • default=120
• gpwidth  (optionally)
  • width of the group's thumbnails
  • default=240
• gpheight  (optionally)
  • height of the group's thumbnails
  • default=120
• rows  (optionally)
  • number of scene's thumbnails rows
  • default=1
• group_rows  (optionally)
  • number of group's thumbnails rows
  • default=2
• spacing  (optionally)
  • space between scene's thumbnails
  • default=20
• gpspacing  (optionally)
  • space between group's thumbnails
  • default=20
• timeout  (optionally)
  • time before clicking when hovering the play icon
  • default=2000
• seen  (optionally)
  • add a seen icon over thumbnails
  • default=true
• from  (optionally)
  • drop the menu from top or bottom screen
  • -800 will drop from top screen
  • 800 will drop from bottom screen
  • 0 will fade the thumbnails from the center of screen
  • default=-800
• closevrmenu  (optionally)
  • add a close menu icon
  • default=true
• fademenu  (optionally)
  • fade out menu icon
  • default=true
• menualpha  (optionally)
  • alpha of the menu icon when fademenu is set to false
  • default=50
• add_txt_thumb  (optionally)
  • add the scene title over the thumbnail
  • default=true
• txt_thumb_css  (optionally)
  • css of the scene title over the thumbnail
  • default=color:#ffffff;font-family:Raleway;font-size:26px;text-align:center
• txt_thumb_vcenter  (optionally)
  • center verticaly the scene title over the thumbnail
  • default=true
• txt_thumb_hasshadow  (optionally)
  • add shadow to the scene title over the thumbnail
  • default=true
• add_txt_group  (optionally)
  • add the group title over the thumbnail
  • default=true
• txt_group_css  (optionally)
  • css of the group title over the thumbnail
  • default=color:#ffffff;font-family:Raleway;font-size:36px;text-align:center
• txt_group_vcenter  (optionally)
  • center verticaly the group title over the thumbnail
  • default=true
• txt_group_hasshadow  (optionally)
  • add shadow to the group title over the thumbnail
  • default=true
• add_thumb_border  (optionally)
  • add a border around the thumbnails
  • default=true
• thumb_border_border  (optionally)
  • thumbnails border
  • default=0 0x000000 1.00
• thumb_border_bgcolor  (optionally)
  • thumbnails background color
  • default=0x000000
• thumb_border_bgalpha  (optionally)
  • thumbnails background alpha
  • default=0
• thumb_border_over_border  (optionally)
  • thumbnails border when hovering
  • default=2 0xffffff 1.00
• thumb_border_over_bgcolor  (optionally)
  • thumbnails border when hovering
  • default=0x000000
• thumb_border_over_bgalpha  (optionally)
  • thumbnails background alpha when hovering
  • default=0.7

Organize by groups

If you want to organise your scenes by group, generate your tour as ususal (MAKE VTOUR Droplet) and then edit your tour.xml file to add your groups and asign the scenes.

Group structure

<panoramagroup 
    name="my_group_name"
    />

Assign a scene to a group

<scene 
    name=""
    ...
    group="panoramagroup name" 
    ...
    />

Add titles and descriptions

You can add a title and description to each groups, and add a description to each scenes (will be displayed onover the scene thumbnail)

Group structure

<panoramagroup 
    name="my_group_name"
    title="My Group Title" 
    description="My Group Description" 
    />

Scene structure

<scene 
    name=""
    ...
    description="scene description" 
    />

Set group's main scene and thumb url

You must set the group's thumbnail url if you choose to organise by group, and alos set the group's main scene if you choose to only display group's thumbnails.

Group structure

<panoramagroup 
    name="my_group_name"
    ...
    thumburl="url of the thumbnail"
    mainscene="scene_name" 
    />

Remove scenes or groups from the menu

You can remove scenes or groups from the menu by adding nogrid="true"

Remove group

<panoramagroup 
    name="my_group_name"
    ...
    nogrid="true" 
    />

Remove scene

<scene 
    name=""
    ...
    nogrid="true" 
    />

License

This plugin is offered as a commercial plugin. It is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will the author of the plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not the plugin author have been advised of the possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event the plugin author will have no liability arising out of this agreement.

If you need a custom version of the Responsive Grid Plugin for Krpano or Panotour Pro feel free to shoot me an email !

All Panoramas Example

Open in a new window

All Categories Example

Open in a new window

Panotour Pro demo here