News • Examples • Documentation • Download • Buy • Forum • Contact

Step by Step Guide Plugin for Krpano & Panotour Pro
by light_line - vr.developer786@gmail.com
Version 1.1

Description

  • Step-by-step guide and feature introduction.
  • Step by Step Guide Plugin, A lightweight tour composer to guide your visitors, onboard new users, highlight new features, make your virtual tour easier and build a stunning online user experience.
  • Fully customizable with 4 different styles.
  • Works only in HTML5 and krpano (version min. 1.19 pr4).
  • Panotour Pro plugin is included.

Features

  • a simple editor for customizing the info layers size and position.
  • This plugin is completely responsive and adapted on mobile and tablet.
  • This plugin works well under the fullscreen mode of Krpano.

Buy / Order the plugin

NOTE - this is a commercial plugin - to use it - it must be purchased.

You can purchase this plugin through the link below.
Updates for this plugin are free!


The plugin download link will be provided within one day
(usually less than 6 hours)
39 € fixed price




More plugins by this developer

Syntax / XML Usage Example

<plugin name="step_by_step_guide" 
        url="plugins/step-by-step-guide.js" 
        keep="true"
        devices="html5"
        include_jquery="true" 
        is_editor_mode="false" 
        theme="plugin_style_1" 
        view_count_limit="0" 
        font_size="17" 
        font_name="inherit" 
        overlay_background_color="0x000000" 
        overlay_background_alpha="0.3" 
        start_automatically="true"
        auto_play="false"
        auto_play_time="4" 
        nextlabel="Next" 
        prevlabel="Previous" 
        skiplabel="Skip" 
        donelabel="Done" 
        style_1_showbuttons="true"
        style_1_showstepnumbers="true"
        style_1_showbullets="true"
        style_1_showprogress="false"
        style_4_showbuttons="true"
        style_4_shape="rect"
        onInitialized="OnInitialized()"
        />

Plugin Attributes

Attribute nameTypeDefault value
include_jqueryBoolean"true"
  • JQuery* library is a requirement for this plugin, but if it has already been included in your HTML page, you have to set this attribute to "False".
    If it is included, set this attribute to "False", otherwise set it to "true". If you are not sure about it, just use "true".
  • Does the plugin add JQuery to the HTML page?
    • true (default) - add JQuery library.
    • false - do not add JQuery library.
  • * JQuery is an open source and free javascript library which is released under the terms of the MIT license.
Attribute nameTypeDefault value
is_editor_modeBoolean"true"
  • does plugin work in editor mode?
    • true set it True, when you want to adjust the info layer position and size.
    • false set it False, when adjusting the info layer is finished and you want to publish the project.
Attribute nameTypeDefault value
themestring"plugin_style_1"
  • Sets background color of the lightbox.
    • plugin_style_1 (default)
    • plugin_style_2
    • plugin_style_3
    • plugin_style_4
Attribute nameTypeDefault value
view_count_limitinteger"0"
  • How many times the tutorial should be shown to each user?
    • 0 unlimited
    • any number
Attribute nameTypeDefault value
font_sizeinteger"17"
  • font size of the info layer.
Attribute nameTypeDefault value
font_nameString"inherit"
  • font name of the info layer.
Attribute nameTypeDefault value
overlay_background_colorstring"0x000000"
  • Sets background color of the overlay layer.

Note - doesn't work in style #4
Attribute nameTypeDefault value
start_automaticallyBoolean"true"
Does plugin start automatically?
  • true (default)
  • false
Attribute nameTypeDefault value
auto_playBoolean"false"
Does the plugin automatically go to the next step?
  • true
  • false (default)
Attribute nameTypeDefault value
auto_play_timeinteger"4"
  • the delay(second) between each step for auto play
    • any number
Attribute nameTypeDefault value
nextlabelstring"Next"
  • Next Button Label
Attribute nameTypeDefault value
prevlabelstring"Previous"
  • Previous Button Label
Attribute nameTypeDefault value
skiplabelstring"Skip"
  • Skip Button Label
Attribute nameTypeDefault value
donelabelstring"Done"
  • Done Button Label
Attribute nameTypeDefault value
style_1_showButtonsBoolean"true"
Show skip buttons or not
  • true (default)
  • false

Note - just usable for style #1 and style #2
Attribute nameTypeDefault value
style_1_showStepNumbersBoolean"true"
Show steps number in the red circle or not
  • true (default)
  • false

Note - just usable for style #1 and style #2
Attribute nameTypeDefault value
style_1_showBulletsBoolean"true"
Show introduction bullets or not
  • true (default)
  • false

Note - just usable for style #1 and style #2
Attribute nameTypeDefault value
style_1_showProgressBoolean"false"
Show introduction progress or not
  • true
  • false (default)

Note - just usable for style #1 and style #2
Attribute nameTypeDefault value
style_4_shapeString"rect"
Shape for highlighting
  • rect Rectangle (default)
  • circle Circle

Note - just usable for style #4
Attribute nameTypeDefault value
style_4_showButtonsBoolean"true"
Show skip buttons or not
  • true (default)
  • false

Note - just usable for style #4
Attribute nameTypeDefault value
onInitializedAction Event
  • This event will be called when plugin is initialized.
  • Could be used to add info layers.

Plugin Actions

Action name
plugin[step_by_step_guide].add_info_layer(
                     'title',
                     'description',
                     width,
                     height,
                     align_position,
                     x_offset,
                     y_offset,
                     max-width (optional),
                     max-height (optional),
                     display_breakpoint-min_width (optional),
                     display_breakpoint-max_width (optional),
                     'info_text_placement (optional)'
                    );
  • add info layer to the virtual tour
    • title: it is just a name, visitors will never see this name.
    • but it is a required field for the editor section of the plugin.
    • description: the description of the user interface element.
    • width: info layer width.
    • height: info layer height.
    • align_position: Alignment / origin-point position of the info layer element on the screen.
    • Possible values: lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom
    • x_offset: Distance from the align point to the edge point.
    • This can be an absolute pixel value or a relative (to the screenwidth or screenheight) percent value.
      Note - for right/bottom aligned elements this distance will be measured from the right/bottom side.
    • y_offset: Distance from the align point to the edge point.
    • This can be an absolute pixel value or a relative (to the screenwidth or screenheight) percent value.
      Note - for right/bottom aligned elements this distance will be measured from the right/bottom side.
    • max-width: maximum width of the info layer element (optional).
    • max-height: maximum height of the info layer element (optional).
    • display_breakpoint-min_width: minimum width of the screen which the info layer element will be displayed (optional).
    • display_breakpoint-max_width: maximum width of the screen which the info layer element will be displayed (optional).
    • info_text_placement: if style #3 is selected, you can use this option to set the position of the guide step relative to the info layer element. (optional).
    • you can use this option to prevent overlapping the info layers.
      Possible values: auto, left, top, bottom, right
      Note - just usable for style #3
Examples
plugin[step_by_step_guide].add_info_layer('bottomright','bottomright test description',100,50,bottomright,0,0);

plugin[step-by-step-guide].add_info_layer('bottom','bottom test description',96%,43,bottom,21,0,791,100%);
plugin[step-by-step-guide].add_info_layer('fullscreen','Press this button to view the tour in the fullscreen mode.',168,30,lefttop,10,11,791,100%);
plugin[step-by-step-guide].add_info_layer('show guide','Press this button to view the guide again.',169,29,lefttop,51,11,791,100%);

plugin[step-by-step-guide].add_info_layer('fullscreen','Press this button to view the tour in the fullscreen mode.',168,30,lefttop,10,11,791,100%,'','',right);
plugin[step-by-step-guide].add_info_layer('show guide','Press this button to view the guide again.',169,29,lefttop,51,11,791,100%,'','',right);
plugin[step-by-step-guide].add_info_layer('thubmnail','Here you can view scenes thumbnail.',222,68,bottomleft,64,16,100%,100%,right);
plugin[step-by-step-guide].add_info_layer('previous','by these buttons, you can go to the previous scene, go to fullscreen mode and zoom the scene.',433,50,bottomleft,0,0,100%,100%,1000,4000,top);
plugin[step-by-step-guide].add_info_layer('next','by these buttons, you can go to the next scene, show/hide the thumbnails, show/hide the map.',430,50,bottomright,0,0,100%,100%,1000,4000,top);
plugin[step-by-step-guide].add_info_layer('previous','by these buttons, you can go to the previous scene, go to fullscreen mode and zoom the scene.',202,50,bottomleft,0,0,100%,100%,600,1000,top);
plugin[step-by-step-guide].add_info_layer('previous','by these buttons, you can go to the previous scene and go to fullscreen mode.',102,50,bottomleft,0,0,100%,100%,0,600,top);
plugin[step-by-step-guide].add_info_layer('next','by these buttons, you can go to the next scene, show/hide the thumbnails, show/hide the map.',201,50,bottomright,0,0,100%,100%,600,1000,top);
plugin[step-by-step-guide].add_info_layer('next','by this button, you can go to the next scene.',101,50,bottomright,0,0,100%,100%,420,600,top);
plugin[step-by-step-guide].add_info_layer('next','by this button, you can go to the next scene.',51,50,bottomright,0,0,100%,100%,0,420,top);
Action name
plugin[step_by_step_guide].show_guide();
  • Show the guide
Examples
plugin[step_by_step_guide].show_guide();

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.