Cloner Element

The cloner is a useful tool that will automatically clone anything that is placed within it. The cloner is used to create thumbnails of nodes within a tour, creating a thumbnail menu or the cloner can be used to create a multi-level menu.

The cloner element is what helps to create menus. You can have a single cloner for a simple thumbnail menu or you can nest cloners for a multi-leveled menu. To clone an element (i.e. a text box or node image), select the clone element from the toolbar, then draw around the element to be cloned.

Components that use the cloner element:

  • Drop-down Silhouette
  • Drop-down Simplex
  • Thumbnail Menu Silhouette
  • Thumbnail Menu Simplex
  • Thumbnail Menu with Categories
  • Thumbnail Menu with Two Categories
  • Accordion Thumbnail Menu with Two Categories


Cloner Settings

Clone Direction – Choose the direction in which the cloned elements will repeat. Choose from horizontal or vertical.

Horizontal/Vertical – Use this setting to set how the cloner will repeat. The setting will change depending on the chosen clone direction. If the clone direction is horizontal, then this setting will be Vertical, and vice versa. Enter a value for the number of columns (or rows), or in case pixels or percentage is chosen, how much of the parent element should be used in that direction.

  • Invert – Select to invert the direction of the cloned elements. For horizontal, the default is from left to right. Select invert to change this from right to left. Likewise for a vertical cloner. The default cloning is from top to bottom. Invert will change the cloned elements from bottom to top.

Auto Size – Select to have the cloner adapt to the size of the cloned instance (rather than the size of the cloner itself).

Transition – When Auto Size is selected, then Transition will be available. Select Enable to have a transition from one sized element to another.

★ Auto Size and Transition can be used for accordion menus. When Transition is selected, the opening and closing of submenus will be animated.

  • Time – Enter the length of the transition.

Source – Choose what the cloner will display:

  • Node – The nodes in the tour will be used to create cloned instances. Elements of the cloned instances will then get their data from each tour node. For instance node images will show an image for each node, text boxes that display user data will get their data from the cloned node, etc.

  • Table – The titles and tags used in the table below will be used to clone instances. Use the table to manually define tags and titles. This will group nodes based on their assigned tags to create menu groups or categories. ✭ Cloners that use a table type will also have triggers for use in logic blocks.

Filter – Here you can filter by tags for the cloner. Only nodes that have the chosen tags will be used in the cloner.

Table – This table appears if table is chosen for the source above. Use the table to group nodes into categories or menu items. For example, you might want to create a menu that has a category for each floor of a building. In this case, every node on the first floor might have a tag like, floor1 and every node on the second floor would have floor2 as the tag. Using the table, we can create two sub-menus; one for the first floor and one for the second. For the first floor, select the floor 1 tag and add the title, First Floor. There will now be a menu category for all nodes tagged with floor1 and the menu title will be First Floor.

  • Expose – Select to show table in the Edit Skin Configuration menu in the HTML5 Output Panel.

  • Description – Add the Description for the table. This will appear as a heading in the Edit Skin Configuration dialog.

  • Skip empty entries – Select to not show any category with no nodes.

  • Inherit filter tags from parent cloner – If the current cloner is nested (a child of another cloner), you can choose to have the cloner use the same filtered tags as its parent.

Active Node – scroll to view – Select to always have the active node in view.

Masking – Select to have anything that falls outside of the cloner area to be masked. Masking means that child elements of the cloner will be clipped at the cloner’s boundaries. ✭ Tip: Keep deselected to allow the node’s tooltip to float outside of the cloner area when a mouse enters.

See also