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".
Usage
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"
callbackaction="clickOnAction"></tours-areas>
- 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: http://www.bennadel.com/blog/2597-preloading-images-in-angularjs-with-promises.htm
Dependencies
- jQuery
- jQuery.UI
- jQuery.ui.touch-punch
- underscore.js