Auto Thumbs Plugin auto_thumbs.xml for Flash and HTML5

by Hernán Sartorio - hernan@uruguay360.com.uy

Description

• Automatically generate nice scrolling thumbnails from your tour's scenes.
• It allows you to group thumbs/scenes into sets or albums, useful when you have a large tour with many scenes.
• Works seamlessly in desktop and mobile/touch devices.
• Requires the Textfield, Scrollearea, and Tooltip (included) plugins. For Krpano 1.17 and higher.

krpano Forum Discussion Thread

Auto Thumbs Plugin Thread

Buy/Download

• The plugin price is €99 (final).
• It includes the Tooltip plugin, which is priced at €29 standalone.
• All future updates are free.

Usage

Include the xml files (they should be in the same folder of the Textfield and Scrollarea plugins):

<include url="plugins/auto_thumbs.xml" />
<include url="plugins/tooltip.xml" />

That's it! Just with that a row of thumbs will be displayed at the bottom left of the tour.

Note: The plugin gets the thumbnails images from the thumburl attribute in each scene. These are generated automatically when you use the Make VTour tool, or you can define them manually too.

To define groups/albums, add an album attribute to the first scene of each desired album. The album will contain that first scene, and all the following scenes until another album is defined.

For example, to define a tour of 2 albums with 2 scenes each:

<scene thumburl="..." title="Scene 1 title"  album="Album 1 title" ...
<scene thumburl="..." title="Scene 2" ...
<scene thumburl="..." title="Scene 3 title" album="Album 2 title" ...
<scene thumburl="..." title="Scene 4" ...

How to hide/show the plugin

The whole plugin is contained in layer with name="auto_thumbs", which you can manipulate dinamically to show or hide the plugin. A basic example:

<layer name="toggle_thumbs_button"
  onclick="switch(layer[auto_thumbs].visible)"  
  ...
/>

You can also play with the alpha attribute, and use the tween() action to achieve something more smooth.

Settings

These are all the possible settings and their default values.

<settings name="auto_thumbs"
          thumb_size="120"
          thumb_background_size="156"
          thumb_spacing="0"
          left="10"   
          right="10" 
          bottom="5"  
          albums_right="10" 
          onstart="" 
          />

• thumb_size
  thumb_background_size
  thumb_spacing
  Defines the size of the thumbails. The values are 2x. Only change them if you use a different skin that the default.
• left
  right
  bottom
  Allows you to define the position of the thumbs relative to the edge of the screen.
• albums_right
  Only for albums version. Allows you to define a different right margin for the bottom row of thumbs.
• onstart
  Actions that will be called after the plugin has been set up.

Examples

Below are two examples, with and without albums, along with a link to their xml source.

Simple
XML source - View in full window.

With albums
XML source - View in full window.