close panorama

Responsive Grid Plugin for Krpano & Panotour Pro for HTML5 & Flash
by Jerome Boccon-Gibod - jerome@360images.fr

Description

A HTML5 & Flash plugin to display all you scene's thumbnails in a responsive grid.

  • Responsive design, will fit any screen.
  • You can display a title for the grid.
  • You can display the scene title over the thumbnail.
  • You can show a scene description over the thumbnail.
  • You can organize you scenes by groups.
  • You can display a title for each groug.
  • You can display a description for each groug.

Syntax / XML Usage Example

Simple include syntax
<include url="%SWFPATH%/plugins/gridmenu.xml"/>
Full include syntax
<include url="%SWFPATH%/plugins/gridmenu.xml"/>
<responsive_grid 
	button="true"

	padding_top="75"
	padding_bottom="75" 
	width_margin="0" 
    
	grid_bgcolor="0x000000"  
	grid_bgalpha="0.7"
    
	display_title="true" 
	grid_title="GRID MENU"   
	grid_title_css="color:#ffffff;font-family:Raleway;font-size:35px;" 
    
	group="false"    
	current="false"
  
	cat_container_height="35"
	cat_container_border="0,0,1,0 0xffffff 1.00"
	cat_container_title_css="color:#ffffff;font-family:Raleway;font-size:25px;"
	cat_container_title_align="left"
    
	cat_container_border_height="1" 

	display_cat_desc="true"
    
	cat_desc_css="color:#ffffff;font-family:Raleway;font-size:14px;text-align:left"  
    
	thumbs_crop="0|75|240|150" 
	thumbs_width="240"
	thumbs_height="150"
	thumbs_padding="25"
	thumbs_scale="100"
	active_thumb_border="3 0xffffff 1.00"
    
	display_thumb_title="true"
    
	thumb_title_align="bottom"
	thumb_title_x="0"
	thumb_title_y="5"
	thumb_title_css="color:#ffffff;font-family:Raleway;font-size:16px;text-align:left;"  
	thumb_title_roundedge="5"
	thumb_title_background="true"
	thumb_title_backgroundcolor="0x000000"
	thumb_title_backgroundalpha="0.8"    
	thumb_title_border="false"
	thumb_title_borderwidth="1" 
	thumb_title_bordercolor="0xffffff" 
	thumb_title_borderalpha="1" 
	thumb_title_padding="3 10" 

	display_thumb_desc="true" 

	thumb_desc_css="color:#ffffff;font-family:Raleway;font-size:15px;text-align:center" 
	thumb_desc_bg_color="0x000000" 
	thumb_desc_bg_alpha="0.6" 
	thumb_desc_padding="8 15" 
                        
	loadscene_flags="MERGE" 
	loadscene_blend="BLEND(1)"     
/>

Plugin Attributes

  • button  (optionally)
    • Display the default button to show and hide the grid
    • default=true
  • padding_top  (optionally)
    • Top padding for the thumbnails scrollarea
    • Top padding will be set to 0 for the mobile devices
    • default=75
  • padding_bottom  (optionally)
    • Bottom padding for the thumbnails scrollarea
    • Bottom padding will be set to 0 for the mobile devices
    • default=75
  • width_margin  (optionally)
    • Let and right margin for the thumbnails scrollarea
    • Margin will be set to 0 for the mobile devices
    • default=0
  • grid_bgcolor  (optionally)
    • Background grid color
    • default=0x000000
  • grid_bgalpha  (optionally)
    • Background grid alpha
    • default=0.7
  • display_title  (optionally)
    • Display grid title
    • default=true
  • grid_title  (optionally)
    • Grid title
    • default=GRID MENU
  • grid_title_css  (optionally)
    • Grid title css
    • default=color:#ffffff;font-family:Raleway;font-size:35px;
  • group  (optionally)
    • Organize the thumbnails in groups
    • Note that scenes which are not in a group won't be displayed
    • default=false
  • current  (optionally)
    • Display only current group thumbnails
    • default=false
  • cat_container_height  (optionally)
    • Height on the group title container
    • default=35
  • cat_container_border  (optionally)
    • Border of the group title container
    • default=0,0,1,0 0xffffff 1.00
  • cat_container_title_css  (optionally)
    • Group title css
    • default=color:#ffffff;font-family:Raleway;font-size:25px;
  • cat_container_title_align  (optionally)
    • Group title align
    • default=left
  • cat_container_border_height  (optionally)
    • Group title bottom padding
    • default=1
  • display_cat_desc  (optionally)
    • Display group description
    • default=true
  • cat_desc_css  (optionally)
    • Group description css
    • default=color:#ffffff;font-family:Raleway;font-size:14px;text-align:left
  • thumbs_crop  (optionally)
    • Thumbnails cropping
    • default=0|75|240|150
  • thumbs_width  (optionally)
    • Thumbnails width
    • default=240
  • thumbs_height  (optionally)
    • Thumbnails height
    • default=150
  • thumbs_padding  (optionally)
    • Thumbnails padding
    • default=25
  • thumbs_scale  (optionally)
    • Maximum thumbnails size in percent
    • default=100
  • active_thumb_border  (optionally)
    • Active thumbnail border
    • default=3 0xffffff 1.00
  • display_thumb_title  (optionally)
    • Display thumbnails titles
    • default=true
  • thumb_title_align  (optionally)
    • Thumbnail title align
    • default=bottom
  • thumb_title_x  (optionally)
    • Thumbnail title x position
    • default=0
  • thumb_title_y  (optionally)
    • Thumbnail title y position
    • default=5
  • thumb_title_css  (optionally)
    • Thumbnail title css
    • default=color:#ffffff;font-family:Raleway;font-size:16px;text-align:left;
  • thumb_title_roundedge  (optionally)
    • Thumbnail title background roundedge
    • default=5
  • thumb_title_background  (optionally)
    • Thumbnail title background display
    • default=true
  • thumb_title_backgroundcolor  (optionally)
    • Thumbnail title background color
    • default=0x000000
  • thumb_title_backgroundalpha  (optionally)
    • Thumbnail title background alpha
    • default=0.8
  • thumb_title_border  (optionally)
    • Thumbnail title background border
    • default=false
  • thumb_title_borderwidth  (optionally)
    • Thumbnail title border width
    • default=1
  • thumb_title_bordercolor  (optionally)
    • Thumbnail title border color
    • default=0xffffff
  • thumb_title_borderalpha  (optionally)
    • Thumbnail title border alpha
    • default=1
  • thumb_title_padding  (optionally)
    • Thumbnail title padding
    • default=3 10
  • display_thumb_desc  (optionally)
    • Display scene description over thumbnail
    • default=true
  • thumb_desc_css  (optionally)
    • Scene description css
    • default=color:#ffffff;font-family:Raleway;font-size:15px;text-align:center
  • thumb_desc_bg_color  (optionally)
    • Scene description background color
    • default=0x000000
  • thumb_desc_bg_alpha  (optionally)
    • Scene description background alpha
    • default=0.6
  • thumb_desc_padding  (optionally)
    • Scene description padding
    • default=8 15
  • loadscene_flags  (optionally)
    • Loadscene flag
    • default=MERGE
  • loadscene_blend  (optionally)
    • Loadscene blend
    • default=BLEND(1)

Plugin Actions

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" 
    />
Assign a scene to a group
<scene 
	name=""
	...
	description="scene description" 
    ...
    />

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

CLICK TO VIEW RESPONSIVE GRID
PLUGIN WITH ALL PANORAMAS DISPLAY

All Categories Example

CLICK TO VIEW RESPONSIVE GRID
PLUGIN WITH ALL CATEGORIES DISPLAY

Panotour Pro demo here