News Examples Documentation Download Buy Forum Contact

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.
Buy and download link: Auto Thumbs plugin for Krpano.

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.

Thumbs screenshot

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.

Thumbs screenshot

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.
CLICK TO VIEW EXAMPLE
With albums
XML source - View in full window.
CLICK TO VIEW EXAMPLE