Tours based on images
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Images Tour Example

Example using 2 directives to create a tour based on images.

Creator tour demo demo

Tour demo here

Here directives are: "toursCreator" , "toursAreas" in the file called: "tourModule.js".


The creator tours only need an array to place all scenes generated.

<tours-creator scenes="scenes">	</tours-creator>

To recreate the tour you need to use this directive:

<tours-areas scenes="tourToLoad" callbacknewscene="sceneChanged" 
  • scenes: The object generated by the creator tours directive
  • callbacknewscene: Function called when a scene has changed
  • callbackaction: Function called when the user made click over a hotspot.

It will be great to preload all images before, in this case visit this link:


  • jQuery
  • jQuery.UI
  • jQuery.ui.touch-punch
  • underscore.js