Sidebar

 v1.0.7

Short overview of the main features can be found at the plugin page
Compatibility: Panotour Pro 2.5.8 (HTML5)
Display changelog
  • Changes for v 1.0.7
  • New: Ability to set custom font for sidebar.
  • New: Ability to set custom text for back button in the hierarchical menu.
  • New: Option to load main pano of the group when open thumbnails container.
  • Improved: Project and current pano descriptions are now scrollable inside the block.
  • Fixed: Lightbox style for thumbnails container keeps overlay in some cases.
  • Fixed: Active menu for thumbnails container is not working properly.
  • Fixed: Thumbnails container menu items active style is not working properly in some cases.
  • Changes for v 1.0.6
  • Fixed: error message appears when sidebar opening, in some cases.
  • Fixed: Not correct menu height applying in the open group. When use option load pano on click on group.
  • Fixed: Custom icons in hierarchical menu can't be applied to the groups which name contains an apostrophe character.
  • Improved: automatic logo resizing function.
  • New: Option to exclude panoramas by ID from hierarchical menu.

Plugin settings

Installation

Sidebar settings

Sidebar Blocks settings

Open / Close Sidebar settings

Logo settings

Logo 2 settings

Current pano description settings

Project description settings

Setup buttons

Buttons settings

Add buttons

Individual button settings

Current pano name settings

Menu type

Menu settings: Menu with thumbnails container

Container settings: Menu with thumbnails container

Menu settings: Hierarchical menu with thumbnails

Hierarchical menu organizing

Exclude panoramas from hierarchical menu

Display Sidebar info in the context menu

Custom font

Custom actions


Installation

The Sidebar plugin is made available as a zipped file. Before installation, remove any previous version of the plugin. Unzip the downloaded package to any temporary folder. The plugin consists of one folder: alpo.sidebar-x.x.x

Copy the alpo.sidebar-x.x.x folder to:

  • Windows: C:\Users\MyName\Documents\Kolor\PanotourPro 2\plugins
  • Mac: /Users/MyName/Documents/Kolor/PanotourPro 2/plugins
  • Linux: /home/$USER/Documents/Kolor/PanotourPro 2/plugins
  • You will need to restart Panotour to see the plugin!
  • To uninstall the plugin, delete the alpo.sidebar-x.x.x directory and all of its contents.

    Sidebar settings

    Basic Sidebar settings for quick access.

    Color
    • Background color of the Sidebar, supports transparency.
    Width
    • Width of the sidebar. If you change the default value, then set appropriate values in the menu settings section for: menu width, thumbnails height and Back button width (for HT menu).
    • Specify width for devices
    • Enable to set separate width for tablets and mobiles.
    • On tablets / On mobiles
    • Set width values. Set 0 to use general width.
    Z-index
    • Setting to display Sidebar over or under other elements of the page (like header, footer, panorama menu, etc). Lower value sets Sidebar under elements, higher value bring it over elements.
    Select Sidebar aligning
    • Sets Sidebar alignment to the left or right side of the screen. Available values: Left, Right.
    Open Sidebar when tour starts
    • Sets Sidebar to open when a tour starts. This happens only once when the tour starts.
    • Exept mobiles
    • If enabled, then Sidebar will be opened when tour starts on all devices except mobiles.

    Close Sidebar on every new pano
    • Sets to close Sidebar every time a new panorama is loading. Thumbnails container won't be closed, if you'd like to close thumbnails container, enable "Close thumbnails container on new pano" in the "Thumbnails container settings".
    • Mobiles only
    • Enable to close Sidebar every time a new panorama is loading, but only on mobiles. Sidebar will stay opened on other devices.

    Display settings for actions done when open / close Sidebar
    • Enable to display actions settings. Set actions will be called every time when Sidebar opens / closes.

    Sidebar Blocks Settings

    This section is hidden by default, to display it enable "Display block settings" option, which is for usability and does not affect tour settings.

    Add Block 1 (2, 3, 4, 5)
    • Adds block. Block is an element inside Sidebar which can handle selected content or can remain empty. Blocks are located from top to bottom: block1 is the top block then block 2 goes under it and so on. By setting the size of the blocks and assigning them one of the pieces of selected content you can position elements inside Sidebar. It is possible to add up to 5 blocks in Sidebar. The blocks must be added one after the other.
    Select content
    • Sets content for block. Selecting of the equal content in several blocks is not recommended, except "Empty".
    • Available contents:
    • Empty: this setting can be used to set empty space in the Sidebar
    • Logo: adds logo to the block. Settings for the Logo are set below
    • Logo 2: same as Logo, adds ability to display the second logo in Sidebar. Settings for the Logo 2 are set below
    • Current panorama name: adds name of the current panorama to the block. Settings for current panorama name are set below
    • Current panorama description: adds description of the current panorama in Sidebar. Settings for current panorama description are set below
    • Project description: adds description of the project in Sidebar. Settings for project description are set below
    • Menu: adds a menu in Sidebar. Settings for menu depending on the menu type are set below
    • Buttons: adds buttons in Sidebar. Up to 10 buttons available. Settings for buttons are set below, first enable Setup buttons setting and then use Buttons settings and Add buttons sections.
    Block height
    • Sets height of the block in percent.
    Block top margin
    • Sets top offset for the block.
    Block minimum height
    • Sets possible minimum height of the block in pixels. Set 0 to ignore this setting. Set the same value to the minimum height and maximum height to keep block fixed sized.
    Block maximum height
    • Sets possible maximum height of the block in pixels. Set 0 to ignore this setting. Set the same value to the minimum height and maximum height to keep block fixed sized.
    Block background color
    • Sets background color and transparency for the block. You can use it to preview the location and size of the blocks and for creative effect.
    Set auto-height for block
    • Sets auto-height to one of the blocks, to fill the free space in the Sidebar, that is not used by other blocks.
    • Block number
    • Sets which block uses auto-height.

    Open / Close Sidebar settings

    This section is hidden by default, to display it enable "Display Open / Close Sidebar settings" option, which is for usability and does not affect tour settings.

    Icon
    • Sets which icon to use for a button. Available parameters: Default to use default graphics and Custom to set your own graphics.
    • Choose file (Icon: custom)
    • Select graphic file for button (png, jpeg).

    Over state
    • Sets to change button on mouse-over or on-press on touch devices.
    • Over icon
    • Sets which icon to use for a button in active state. Available parameters: Default to use default graphics and Custom to set your own graphics.
    • Choose file (Over icon: custom)
    • Select graphic file for button in active state (png, jpeg).
    Open state
    • Sets to change button icon to close Sidebar.
    • Open state icon
    • Sets which icon to use for a button to close Sidebar. Available parameters: Default to use default graphics and Custom to set your own graphics.

    • Choose file (Open state icon: custom)
    • Select graphic file for button to close Sidebar (png, jpeg).
    • Over state (if Sidebar is open)
    • If separate icon selected for close button, it can also has an active state on mouse over.

    • Over icon
    • Sets which over icon to use for close button (if open state icon enabled). Available parameters: Default to use default graphics and Custom to set your own graphics.
    • Choose file (Over icon: custom)
    • Select graphic file for close button in active state (png, jpeg).
    Icon position
    • Sets vertical position for button on the screen. Available positions: Top, Center, Bottom
    Offset
    • Set button offset in pixels from its position. x: sets horizontal offset, y: sets vertical offset.
    Separate position for open state
    • Sets separate position and offset for the close button if Sidebar is open.
    • Open state position
    • Sets vertical position for button on the screen. Available positions: Top, Center, Bottom
    • Offset
    • Set button offset in pixels from its position. x: sets horizontal offset, y: sets vertical offset.
    Icon opacity
    • Sets opacity for button in percent. Available values: 10 - 100%
    Separate opacity for opened state
    • Enable to set opacity for close button when Sidebar is open.
    • Icon opacity
    • Separate opacity available values: 10 - 100%
    Hide on click and show with delay
    • Sets to hide button on click and then show it with a delay.
    • Delay
    • Time period in milliseconds to wait after hiding button on click before display it again.

    Invisible opener (mouse over)
    • Adds an invisible element that opens Sidebar on mouse over near the edge of the screen.

    Logo settings

    Displays logo image in the selected block of the Sidebar.

    This section is hidden by default, to display it enable "Display Logo settings" option, which is for usability and does not affect tour settings.

    Logo
    • Choose image for logo (png, jpeg).
    Align Logo in a Block
    • Sets logo image to align in the block. Available values: Top, Bottom.
    Choose an action
    • Sets actions to call on click logo.

    Logo 2 settings

    Adds ability to display two logos in the Sidebar on different positions.

    This section is hidden by default, to display it enable "Display Logo 2 settings" option, which is for usability and does not affect tour settings.

    Logo 2
    • Choose image for logo 2 (png, jpeg).
    Align Logo 2 in a Block
    • Sets logo 2 image to align in the block. Available values: Top, Bottom.
    Choose an action
    • Sets actions to call on click logo 2.

    Current pano description settings

    Displays description of the currently viewing panorama inside the selected block of the Sidebar. Description should be set in the description field at the TOUR tab of Panotour Pro.

    This section is hidden by default, to display it enable "Display settings for current pano description" option, which is for usability and does not affect tour settings.

    Align description text
    • Sets text alignment inside the layer. Available values: Left, Right, Center.
    Padding
    • Sets text indent from the edges of the description layer. Default value: 8px.
    Background
    • Adds background for the description layer.
    • Color
    • Sets color and opacity for background of the description layer.

    Project description settings

    Displays description of the project inside the selected block of the Sidebar. Description should be set in the description field at the TOUR tab of Panotour Pro.

    This section is hidden by default, to display it enable "Display settings for current pano description" option, which is for usability and does not affect tour settings.

    Align description text
    • Sets text alignment inside the layer. Available values: Left, Right, Center.
    Padding
    • Sets text indent from the edges of the description layer. Default value: 8px.
    Background
    • Adds background for the description layer.
    • Color
    • Sets color and opacity for background of the description layer.

    Setup buttons

    If enabled, displays sections to add and set-up buttons. This option is for usability in GUI, and does not affect tour settings.

    Buttons settings

    Group of settings to set buttons styling.

    This section is hidden by default, to display it enable "Display buttons settings" option, which is for usability and does not affect tour settings.

    Buttons size
    • Sets size for all buttons in pixel.
    • Button width
    • Sets width of buttons
    • Button height
    • Sets height of buttons
    • Button margin
    • Sets margin between buttons horizontally and vertically.
    Buttons settings: Tablet
    • Separate settings for buttons on tablet devices.
    • Display buttons on tablet
    • Display or hide buttons on tablet devices.
    • Button width
    • Sets width of buttons displayed on tablet devices.
    • Button height
    • Sets height of buttons displayed on tablet devices.
    • Button margin
    • Sets margin between buttons displayed on tablet devices.
    Buttons settings: Mobile
    • Separate settings for buttons on mobile devices.
    • Display buttons on mobile
    • Display or hide buttons on mobile devices.
    • Button width
    • Sets width of buttons displayed on mobile devices.
    • Button height
    • Sets height of buttons displayed on mobile devices.
    • Button margin
    • Sets margin between buttons displayed on mobile devices.
    Buttons color
    • Sets color and opacity for buttons background.
    Buttons roundness
    • Sets roundness for buttons background corners.
    Buttons roundness: Tablet
    • Sets roundness for background corners of buttons displayed on tablet devices.
    Buttons roundness: Mobile
    • Sets roundness for background corners of buttons displayed on mobile devices.
    Icon scale relative to button
    • Sets icon file added to the button to be scaled relative to the button size. If disabled, icon will have original size and will be cropped by button size.
    • Scaling
    • Percentage value to scale buttons icon. Maximum value: 100%, minimum value: 0, default value: 80%.
    Add border
    • Displays a border around the button background.
    • Border color
    • Sets color for button border.
    • Border width
    • Sets width for border line.
    Add hover effect
    • If enabled, shows the effect upon mouse-over or on-press on touch devices.
    • Change border color
    • Changes the color of the button border.
    • Active border color
    • Sets the border color that will be used when active e.g. it appears upon mouse-over or on-press on touch devices.
    • Change buttons color
    • Changes the background color of buttons.
    • Active buttons color
    • Sets the color that will be used when active e.g. it appears upon mouse-over or on-press on touch devices.
    Use custom tooltip style for buttons
    • Enables style for tooltips. Style settings are set below in the custom tool-tip style settings section. Available tooltip settings: Font, Color, Background, Border width, Effect (None / Shadowed), Round edge
    Buttons aligning in a block
    • Sets alignment of the buttons inside the block.
    • X-offset
    • Sets horizontal offset for buttons. Available for buttons alignment settings:Left, Right, Left-top, Right-top, Left-bottom, Right-bottom.

    Add buttons

    In this section you can add up to 10 buttons in Sidebar and assign individual parameters for them. Buttons are distributed in two rows: 1-5 buttons in the first row and 6-10 buttons in the second row. If you want to add, for instance, three buttons in one row, then you must add 1, 2, 3 buttons. If you want to add, for instance, two buttons one under another, then add button 1 and button 6. To set individual parameters click on the button name and set it in the appropriate Button settings section (on the right hand).

    Button 1 - Button 10
    • Select which buttons to display in the Sidebar.

    Individual button settings

    Settings that can be assigned individually for every button. To set buttons parameters click on the button name.

    Button icon
    • If a file is selected it will appear in the center of the button in accordance with the scale settings.
    Hide on desktop
    • If enabled, this button is hidden on desktop. The position of any other buttons will be calculated accordingly.
    Hide on tablet
    • If enabled, this button is hidden on tablet devices. The position of any other buttons will be calculated accordingly.
    Hide on mobile
    • If enabled, this button is hidden on mobile devices. The position of any other buttons will be calculated accordingly.
    Display tooltip
    • If enabled, this displays tooltip text with either default or custom style.
    • Tooltip
    • Tooltip text for button
    Choose an action
    • Choose actions for button click.
    Add button toggle actions
    • If enabled, this sets toggle actions (upon every second click) for buttons. Use it for buttons that need to enable/disable something. For instance, if the button action is set to start auto-rotation, then you should set toggle action to stop auto-rotation.
    • Button icon
    • if a file is selected, the button icon will be changed accordingly.
    • Choose an action
    • Choose actions for every second button click.

    Current pano name

    Panorama name prefix text
    • The text to display before the name of the current panorama. Default value: Current Panorama:
    Display more settings for Current pano name
    • Settings section is hidden by default, enable to display it.

    Current pano name settings
    Displays name of the currently viewing panorama inside the selected block of the Sidebar.

    Align text layer in a block
    • Sets alignment of the layer in a block (not the text inside this layer, as this setting is below). Available values: Left, Left-top, Left-bottom, Right, Right-top, Right-bottom, Top, Bottom, Center.
    X-offset for text layer
    • Sets horizontal offset for the layer. Offset side depends on the text layer horizontal alignment.
    Text settings
    • Settings for text inside the text layer.
    • Font
    • Sets one of the available fonts for the current pano name text. Default font: Trebuchet MS. Available fonts: Arial, Arial Black, Tahoma, Trebuchet, Verdana, Georgia, Times New Roman, Courier New.
    • Color
    • Sets text color.
    • Font size
    • Sets font size.
    • Text align
    • sets text alignment inside text layer. Available values: Left, Right, Center.
    • Underline / Bold / Italic
    • Decoration for text.
    Additional Text settings (for name only)
    • Sets each of font size, color, underline, bold, italic separately for panorama name part of the text.

    Menu type

    Select type of menu. Available types:

    Menu with thumbnails container

    Menu with thumbnails container

    Hierarchical menu with thumbnails

    Hierarchical menu with thumbnails

    Menu with thumbnails container (TC)
    • Organizes panoramas and groups into a scrollable list with text menu items. Items displays group names and single panoramas names. On click to item it opens thumbnails container element with a scrollable list of thumbnails. Settings for this menu are divided into two parts: menu settings and thumbnails container settings, to display them enable appropriate options below.
    • Note about thumbnails in container: Thumbnails are created automatically from your panoramas. These appear cropped a little to exclude the bottom, which is not always retouched. You can set your own thumbnails. Prepare your images with the following sizes: 240x150px for groups; and 280x150 for panoramas without groups. To change the default thumbnails, go to your panorama settings in the TOUR tab in Panotour Pro. You can see the thumbnail on the left of the panorama name; click on it to select your thumbnail file.
    • It's recommended that you save all of your graphics for virtual tours with the option 'Save for web and devices' in Photoshop, or with a similar option in other software. This provides a good balance between quality and file size.
    • Active menu (only if Sidebar is open)
    • Sets sidebar menu to react upon loading panoramas from other plugins/elements of the tour (prev/next buttons, click on hotspots, etc.).
    • Display menu settings
    • If enabled, this displays menu settings. This option is for usability in GUI, and does not affect tour settings.
    • Display thumbnails container settings
    • if enabled, this displays menu thumbnails container settings. This option is for usability in GUI, and does not affect tour settings.
    Hierarchical menu with thumbnails (HT)
    • Organizes panoramas and groups into a scrollable list with text menu items and thumbnails inside Sidebar. Groups appears as text menu items, single panoramas appears as thumbnails. On click group item it opens scrollable list of panoramas thumbnails which are in this group.
    • Display menu settings
    • If enabled, this displays menu settings. This option is for usability in GUI, and does not affect tour settings.

    Menu settings (Menu with thumbnails container)

    Text settings
    • Font
    • Sets font for menu items. Available fonts: custom, Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Georgia, Times New Roman, Courier New. Default font: Trebuchet MS.
    • Setup custom font for Sidebar
    • Color
    • Sets text color for menu items.
    • Font size
    • Sets font size for menu items.
    • Background color
    • Sets background color for menu items.
    • Menu text aligning
    • Alignment of the text of menu items. Available values: Left, Right, Center.
    • Text offset
    • Shift text of menu items.
    • Underline / Bold / Italic
    • Additional text decoration
    Display buttons to scroll menu
    • Displays buttons to scroll menu. Button automatically hides if reached the end of the area.
    • Background color
    • Sets color and opacity of the buttons background.
    • Background width
    • Sets width of the button (background)
    • Background height
    • Sets height of the button (background)
    • Horizontal buttons alignment
    • Set horizontal alignment for buttons inside the scrollable area
    • Buttons opacity
    • Sets opacity for button image, not for button background (for background use "Background color")
    • Default Buttons
    • Enable to use default arrows buttons.
    • Default Buttons color
    • Sets color for default arrow buttons.
    • Custom buttons (Default Buttons disabled)
    • If default buttons disabled you can select your own images for buttons.
    • Top scroll button
    • Set your image for top scroll button
    • Bottom scroll button
    • Set your image for bottom scroll button
    • Mouse over behavior
    • Enable to set your buttons to react on mouse hover.
    • Change background color / opacity
    • Set to change background color and opacity on mouse over.
    • Change buttons opacity
    • Set to change buttons (image) opacity on mouse over.
    Display borders
    • Set to display borders around the menu item
    • Border color
    • Choose color for borders
    • Border width: Top, Right, Bottom, Left
    • Sets width for borders in pixel, separately for every side.
    Display advanced settings
    • If enabled, this displays advanced settings. This option is for usability in GUI, and does not affect tour settings.
    • Menu text item height
    • Height of each item in the menu.
    • Space between items
    • Margin between items in the menu.
    • Menu horizontal offset
    • Horizontal offset of each item.
    • Width of the menu
    • Width of each item in the list.
    • Separate settings for tablets / mobiles
    • Enable to activate separate advanced settings for devices.
    Add scroll indicator
    • If enabled, this displays a scroll indicator if the menu is scrollable. (This depends on the screen height of the device).
    • Indicator color
    • Sets the color and opacity of the scroll indicator.
    • Indicator width
    • Sets the width of the scroll indicator and scroll bar.
    • Background scrollbar
    • If enabled, this displays color settings for the scroll bar (indicator) background.
    • Background scrollbar color
    • Sets color and opacity for scroll bar (indicator) background.
    Behavior
    • If enabled, this activates and displays behavior settings for menus.
    • Change background color ( Mouse over )
    • Sets the color and opacity for active state of menu items (mouse-over and opened items).
    • Display active group line
    • If enabled, this activates and displays active group line settings.
    • Color
    • Color and opacity of the line.
    • Width
    • Width of the line.
    • Add icon over active group line
    • Choose a file to add an icon over the line.
    Mark text menu item of current pano
    • If enabled, this displays a marker on the current item. (Current group or panorama if no group set).
    • Marker file
    • Section to set up the image file for markers (png, jpeg). Available values: Default (Circle image): enables Color settings to change the color of the default marker; Custom: enables file settings to choose your own image file for markers.
    • Settings: Default
    • If enabled, sets the default settings for markers. If not enabled, activates custom settings and displays custom settings section.
    • Marker position ( Default settings: disabled )
    • Sets position of the marker relative to the menu item. Available values: Top, Bottom.
    • Scale down ( Default settings: disabled )
    • Sets the scale for marker image files. Default value: 50%. For instance, if the image file is 48x48px it will be displayed as 24x24px with the default setting. If you change scale setting to 100% it will be displayed as 48x48px.
    • Y offset ( Default settings: disabled )
    • Vertical shift of marker image relative to menu items.

    Thumbnails container settings

    Also see "Note about thumbnails in container" in the Menu with thumbnails container (TC) section.

    Container background color: Select
    • Sets the background color for thumbnail containers. Available values: Auto - the color and opacity of the sidebar will be used. Custom – manually set color and opacity.
    Close icon: Select
    • Select an icon to close thumbnails container.
    • Style
    • Available options for close icon: Default Black, Default White, Custom.
    • Scale
    • Sets the size of the close icon as a percentage.
    • Opacity
    • Sets the opacity of the close icon as a percentage.
    Thumbnails margin
    • Sets the the indent for thumbnails. Available options: Right margin, Bottom margin
    Mark current panorama thumbnail ( display icon )
    • Enables the display of an icon over the thumbnail of the currently-displayed panorama. Available options: Default - Eye icon, Custom - add your own icon.
    Overlay inactive thumbnails
    • Enables the display of an overlay over the inactive thumbnails.
    • Overlay color
    • Select the overlay color and opacity.
    Display buttons to scroll thumbnails
    • Displays buttons to scroll thumbnails. Button automatically hides if reached the end of the area.
    • Background color
    • Sets color and opacity of the buttons background.
    • Background width
    • Sets width of the button (background)
    • Background height
    • Sets height of the button (background)
    • Vertical buttons aligning
    • Set vertical alignment for buttons inside the scrollable area
    • Buttons opacity
    • Sets opacity for button image, not for button background (for background use "Background color")
    • Default Buttons
    • Enable to use default arrows buttons.
    • Default Buttons color
    • Sets color for default arrow buttons.
    • Custom buttons (Default Buttons disabled)
    • If default buttons disabled you can select your own images for buttons.
    • Left scroll button
    • Set your image for left scroll button
    • Right scroll button
    • Set your image for right scroll button
    • Mouse over behavior
    • Enable to set your buttons to react on mouse hovering.
    • Change background color / opacity
    • Set to change background color and opacity om mouse over.
    • Change buttons opacity
    • Set to change buttons (image) opacity on mouse over.
    Display number of total panoramas ( for selected group )
    • Enables the display of a thumbnail number of the total panoramas in the group. In this format: "1 of 5". It displays over the thumbnail.
    • Prefix for total number
    • Sets the prefix for total number. Default value: " of " - this will result as "1 of 5" (in case of 5 pano in a group).
    • Font size
    • Sets font size for the text.
    • Font color
    • Sets color for the text.
    • Y-offset
    • Shifts text vertically.
    • Padding
    • Sets text padding, (useful when using backgrounds).
    • Opacity
    • Opacity of the layer with text and background.
    • Background
    • Enables the setting of a background for text.
    • Background color ( Background: enabled )
    • Sets the color and opacity of the background.
    • Round corners ( Background: enabled )
    • Sets the roundness for background corners.
    • Border
    • Enables the adding of a border to the background.
    • Border color ( Border: enabled )
    • Sets the color of the background border.
    • Border width ( Border: enabled )
    • Sets the width of the background border.
    Display panorama name over thumb
    • If enabled, this displays the name of the panorama above its thumbnail.
    • Font size
    • Sets the font size for name text.
    • Select position
    • Selects the position of the name text inside the thumbnail container. Available options: Left, Right, Center.
    • X-offset
    • Shifts the name text horizontally.
    • Hide for single panoramas
    • If enabled, the name text will be hidden for single panoramas (those without a group).
    Activate lightbox style for thumbnails container on selected devices
    • If enabled, this displays thumbnails container separately of the Sidebar. It displayed on the center of the screen with colored background. This option will be activated on selected devices.
    • Screen overlay color
    • Sets color and opacity for the screen overlay (background) that appears behind the thumbnails container.
    • Close sidebar on display thumbnails
    • Enable to close sidebar everytime when thumbnails container appears.
    • Open sidebar on hide thumbnails
    • Enable to open sidebar on every close of thumbnails container.
    • Select devices to apply the settings
    • Select devices on which to use this setting.
    Close thumbnails container on new pano
    • Sets up the closure of thumbnail containers upon the loading of every new panorama.
    • Close only if sidebar is closed
    • Sets up the closure of thumbnail containers upon the loading of every new panorama only if Sidebar is closed at the moment.
    • Select devices to apply the settings
    • Sets the devices on which to close thumbnail containers. Available options: All Devices, Only on Desktop, Only on Tablets and Mobiles, Only on Tablets, Only on Mobiles.
    Load main pano when open thumbnails container
    • If enabled, main panorama of the group will be loaded upon the click on a menu item.
    Do not display thumbnails container for single panoramas
    • If enabled, new panoramas will be loaded upon the click on a menu item, without opening the thumbnail container.
    Display description ( if exist ) under thumbnail
    • If enabled, this displays panorama descriptions under thumbnails, only if a panorama has a description set in Panotour Pro. The Sidebar interface is made with the idea of using short descriptions.

    Menu settings (Hierarchical menu with thumbnails)

    Color settings
    • Menu items background color
    • Sets background color for menu items.
    Borders settings
    • Display borders around menu items
    • Set to display borders around the menu item
    • Border color
    • Choose color for borders
    • Border width: Top, Right, Bottom, Left
    • Sets width for borders in pixel, separately for every side.
    Icon settings
    • Display icon with menu items
    • If enabled, it displays icon inside the menu item.
    • Align Icon
    • Set icon alignment.
    • Icon X-offset
    • Horizontal shift of icon image.
    • Icon Y-offset
    • Vertical shift of icon image.
    • Icon scale
    • Percentage scaling of icon image.
    • Default icon
    • Enable to use default arrow icon
    • Default icon color (Default icon: enabled)
    • Sets color for default icon
    • File (Default icon: disabled)
    • Select your image for menu items icon
    • Specify icon
    • Enable to open settings of individual icons. Use + button to create many icons and assign them to different menu items.
    • Icon file
    • Select icon file
    • Specify custom items
    • Set which custom items will have this icon file. Enter custom item indexes separated by comma.
    • Specify group names
    • Set which group items will have this icon file. Enter group names, exactly as in the Tour Tab group name, separated by comma.
    • Specify panorama IDs
    • Set which panorama items will have this icon file. Enter panoramas IDs, only digits, separated by comma. (If pano ID is pano123 enter 123)
    Text settings
    • Font
    • Sets font for menu items. Available fonts: custom, Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Georgia, Times New Roman, Courier New. Default font: Arial
    • Setup custom font for Sidebar
    • Font color
    • Sets text color for menu items.
    • Font size
    • Sets font size for menu items.
    • Menu text alignment
    • Alignment of the text of menu items. Available values: Left, Right, Center.
    • Text padding
    • Shift text of menu items.
    • Underline / Bold / Italic
    • Additional text decoration
    Mouse over/tap behavior settings
    • Change background color of menu item
    • Enable to change color of the menu item when tap on it or on mouse hovering. Set color.
    Thumbnails settings
    • Section to set parameters for thumbnails that appears with menu items.
    • Thumbnails height
    • Sets height for thumbnails the width will be set relatively, keeping the aspect ratio.
    • Thumbnails horizontal aligning
    • Sets alignment for thumbnail inside the menu. Available options: Left, right, center.
    • Thumbnails horizontal offset
    • Sets horizontal offset for thumbnail in pixels.
    • Text display settings
    • Settings to set position of the text ( panorama name ) under or over the thumbnail. Or display only thumbnails and hide text with panorama name.
    • Menu items top padding
    • Sets indent for content inside items, from the top.
    • Menu items bottom padding
    • Sets indent for content inside items, from the bottom.
    • Margin between thumbnails and text
    • Sets margin between thumbnails and text
    • Separate thumbnails settings for tablets / mobiles
    • Enable to activate separate thumbnails settings for devices.
    Back button settings
    • Settings for top menu button that exit to the previous level.
    • Width
    • Sets width of the button
    • Height
    • Sets height of the button
    • Separate size settings for tablets / mobiles
    • Enable to activate separate size settings for devices.
    • Bottom margin
    • Sets bottom indent of button from menu items
    • Button align
    • If width of the button set smaller than menu, align setting can help to achieve desired horizontal position of the button inside the menu area. Available options: Left, right, center
    • Display background
    • Enable to display background for the button.
    • Background color
    • Sets background color of the button.
    • Change background on mouse over / touch ( Display background: enabled )
    • Enable to change background on touch or mouse hovering
    • Background color
    • Sets active background color of the button to be displayed on mouse hovering or touch.
    • Display icon
    • Enable to display icon with back button.
    • Use default icon
    • Use default icon in the button. By default the arrow icon used to represent the exit from current level.
    • Icon color (Display default icon: enabled)
    • Sets color for the default icon.
    • Choose icon file (Display default icon: disabled)
    • Choose your icon file (.png, jpg).
    • Icon size
    • Sets width and height of the icon.
    Display text (in the back button )
    • Enable to display text in the back button.
    • Group name text settings
    • Back button text
    • Select which text to display in the back button, Group name or any custom text.
    • Font color
    • Sets color for the text.
    • Font size
    • Sets font size for the text.
    • Underline / Bold / Italic
    • Additional text decoration
    • Horizontal text alignment
    • Horizontal text alignment inside the exit button.
    • Vertically center text
    • Sets text on the verical center of the exit button.
    • Padding settings
    • Sets text indent separately for every side.
    Scroll buttons settings
    • Display scroll menu buttons
    • Displays buttons to scroll menu. Button automatically hides if reached the end of the area.
    • Background color
    • Sets color and opacity of the buttons background.
    • Background width
    • Sets width of the button (background)
    • Background height
    • Sets height of the button (background)
    • Horizontal buttons aligning
    • Set horizontal alignment for buttons inside the scrollable area
    • Buttons opacity
    • Sets opacity for button image, not for button background (for background use "Background color")
    • Default Buttons
    • Enable to use default arrows buttons.
    • Default Buttons color
    • Sets color for default arrow buttons.
    • Custom buttons (Default Buttons disabled)
    • If default buttons disabled you can select your own images for buttons.
    • Top scroll button
    • Set your image for top scroll button
    • Bottom scroll button
    • Set your image for bottom scroll button
    • Add mouse over / tap behavior
    • Enable to set your buttons to react on mouse hovering.
    • Change background color / opacity
    • Set to change background color and opacity om mouse over.
    • Change buttons opacity
    • Set to change buttons (image) opacity on mouse over.
    Scroll indicator settings
    • Display scroll indicator
    • If enabled, this displays the scroll indicator if the menu is scrollable. (This depends on the screen height of the device).
    • Indicator color
    • Sets the color and opacity of the scroll indicator.
    • Indicator width
    • Sets the width of the scroll indicator and scroll bar.
    • Display scrollbar background
    • If enabled, this displays scroll bar.
    • Background scrollbar color
    • Sets color and opacity for scroll bar background.
    Display advanced settings
    • Displays advanced settings.
    • Menu text item height
    • Height of each item in the menu excluding thumbnail settings.
    • Space between items
    • Vertical offset between items in the menu.
    • Menu horizontal offset
    • Horizontal offset of each item.
    • Width of the menu
    • Width of all items in the menu.
    • Group as text items
    • Displays items without thumbnail, for items that represent groups.
    • Pano as text items
    • Displays items without thumbnail, for items that represent panoramas.
    • Custom items as text
    • Displays items without thumbnail, for custom items.
    • Separate settings for tablets / mobiles
    • Enable to activate separate advanced settings for devices.
    • Load pano on click on group
    • If enabled, then clicking on the item that represent a group will load the main pano of that group.
    • And open group menu
    • Enable to execute the default action of opening the group level together with loading the main pano of the group.

    Hierarchical menu organizing

    Sets menu organizing. Available options: Default, Custom.

    Default
    • Sets the default panotour two-level menu structure - Group > Panorama list.
    Custom
    • Opens the settings to set custom menu items with ability to create unlimited sublevels. Using the custom organizing explained in this video
    • Ignore not assigned groups and panoramas.
    • If enabled, then only the custom menu items will be visible in the menu with groups and non-grouped panoramas, which are assigned to one of the custom items.
    Individual settings for custom item.
    • Item Title
    • Sets title of the item in the menu.
    • Image file
    • Image that will be displayed with item in the menu (as thumbnail for default items), if not enabled "custom items as text" in the advanced settings.
    • Assign custom items by index
    • Set any custom item as a sublevel of this item, using their indexes. Enter indexes of the sublevel custom items separated with comma or space. Any custom item can be assigned once to the only one custom item.
    • Assign groups by color
    • Sets panotour groups as sublevels of this item. Choose any color and copy its index, then set this index to the color settings of the selected groups in the Tour tab.
    • Assign single panoramas by ID
    • Sets non-grouped panoramas as sublevels of this item. Enter panorama ID (digit only) separated with comma or space. Any non-grouped panorama can be assigned once to the only one custom item.
    • Additional actions done on click
    • Choose action that will be executed on click. Only one action is possible due to the limitation of the Panotour Pro.

    Exclude panoramas from hierarchical menu by ID

    Type pano IDs which you'd like to remove from the menu, separated by comma (Example: pano12, pano15).
    Note: Single panoramas which assigned to custom menu items won't be removed.

    Display Sidebar info in the context menu

    If enabled, displays a tiny note "Made with Sidebar" in the context menu, and links to Sidebar web page. It is enabled by default.
    I'd be very thankful if you'd leave this option enabled!

    Custom font

    It's possible to add custom font for Sidebar text. To make this, in the menu settings>text settings select "custom" in the dropdown fonts list. In the appeared field "Font name" write a name of your font (for instance Alex Brush).
    After the tour is exported add font style data into the main html page, this requires to open main html file with the code editor software (e.g. Atom, VS code, Sublime, Notepad++).
    Add the following code between any style tags. This modification will be lost after re-building the tour and you'll have to do it again, so it's recomended to make this in the last stage. @font-face { font-family: 'Alex Brush'; src: url('./indexdata/fonts/Alex Brush.ttf'); }
    Add folder "fonts" with ttf file to your tourdata directory, to make font accessible with the url that was set in the previous piece of code (indexdata/fonts/Alex Brush.ttf).

    Before and after editing the main html file

    Before and after editing the main html file

    Custom actions

    Sidebar comes with a set of custom actions that can be assigned to click-able elements (plugins) that are in Panotour Pro (Simple button, Toggle button, Hotspots, Plugin Notifications etc.). Actions are accessible in the Choose actions dialog in Panotour Pro, under the collapsible element [Plugin] Sidebar.

    Available actions:
    • Toggle open/close Sidebar
    • Opens or closes Sidebar depending on its state.
    • Close Sidebar
    • Action to only close Sidebar. If Sidebar is already closed, no action will be taken.
    • Open Sidebar
    • Action to only open Sidebar. If Sidebar is already open, no action will be taken.
    • Menu TC: Close thumbnails container
    • Action to the close thumbnails container, if the appropriate menu type is selected. Can be used only if selected menu type is "Menu with thumbnails container"


    Thank you so much for purchasing the plugin for Panotour Pro.
    If you have any questions relating to this plugin, I'll try my hardest to assist you.

    Alexander Popov


    Top