Added ability to add clickable image on walkthrough, if want to explain something more visual and to have an event if clicked, to redirect, for example

Author: souly1

README.md

@@ -130,13 +130,15 @@ and use one of the two configurations:
 - `icon` (optional) - Any walkthrough type. If set to any of the predefined values ("single_tap", "double_tap", "swipe_down", "swipe_left", "swipe_right", "swipe_up"), in such case the icon will be bound to focus element (if exists), make sure to add 'ng-walkthrough.tap_icons.js' following instructions above. any other icon can be used and will be loaded from supplied folder
 - `main-caption` (optional) - Any walkthrough type. This is the text that will be displayed in the walk-through. Text can be formatted
 - `use-button` (optional) - Any walkthrough type. set to 'true' you want a button displayed that most be clicked in order to close walkthrough, otherwise clicking anywhere while walkthrough displayed will close it
+- `walkthrough-hero-image` (optional) - Any walkthrough type. Image to display in walkthrough rigth below caption text
 - `icon-padding-left` (optional) - Any walkthrough type. Add padding to the icon from the left in percentage
 - `icon-padding-top` (optional) - Any walkthrough type. Add padding to the icon from the top in pixels
 - `tip-icon-location` (optional) - For tip walkthrough. In case there is an overlap between the tip text box and the tip icon you can define here which is on top. Either "FRONT" or "BACK"
 - `force-caption-location` (optional) - Any walkthrough type. Set caption location at the top of screen or closer to bottom. Acceptable values: "TOP" or "BOTTOM"
 - `tip-color` (optional) - For tip walkthrough. Define the tip textbox background color. Currently supports "BLACK" or "WHITE" values
 - `on-walkthrough-show` (optional) - Any walkthrough type. Bind method to be called when walkthrough is displayed
 - `on-walkthrough-hide` (optional) - Any walkthrough type. Bind method to be called when walkthrough is hidden
+- `on-walkthrough-content-clicked` (optional) - Any walkthrough type. Bind method to be called when walkthrough context or hero image clicked
 
 ## Testing
 

css/ng-walkthrough.css

@@ -201,3 +201,7 @@
     background-color: #ffffff;
 
 }
+
+.walkthrough-hero-image{
+    margin-top: 15px;
+}

ng-walkthrough.js

@@ -29,6 +29,7 @@ angular.module('ng-walkthrough', [])
                 '<div class="walkthrough-text-container" ng-class="{\'walkthrough-top\': (!forceCaptionLocation || forceCaptionLocation==\'TOP\'), \'walkthrough-bottom\': forceCaptionLocation==\'BOTTOM\'}">',
                 '<pre class="walkthrough-element walkthrough-text" ng-bind="mainCaption">',
                 '</pre>',
+                '<img ng-if="walkthroughHeroImage" class="walkthrough-element walkthrough-hero-image" ng-src="{{walkthroughHeroImage}}" ng-click="onWalkthroughContentClicked()">',
                 '</div>',
                 '<img class="walkthrough-element walkthrough-icon" ng-show="icon && icon!=\'arrow\'" ng-src="{{walkthroughIcon}}">',
                 '<div class="walkthrough-element walkthrough-arrow" ng-show="icon==\'arrow\'"></div>',
@@ -44,9 +45,10 @@ angular.module('ng-walkthrough', [])
                 '<button class="walkthrough-done-button walkthrough-tip-done-button-text-box" type="button" ng-if="useButton" ng-click="onCloseClicked($event)" on-touch="onCloseTouched($event)">',
                 '<img class="walkthrough-tip-button-image-text-box" ng-src="{{closeIcon}}" alt="x">',
                 '</button>',
-                '<div class="walkthrough-element walkthrough-tip-text-box" ng-class="{\'walkthrough-tip-text-box-color-black\': tipColor==\'BLACK\', \'walkthrough-tip-text-box-color-white\': tipColor==\'WHITE\'}">',
+                '<div class="walkthrough-element walkthrough-tip-text-box" ng-click="onWalkthroughContentClicked()" ng-class="{\'walkthrough-tip-text-box-color-black\': tipColor==\'BLACK\', \'walkthrough-tip-text-box-color-white\': tipColor==\'WHITE\'}">',
                 '<pre ng-bind="mainCaption">',
                 '</pre>',
+                '<img ng-if="walkthroughHeroImage" class="walkthrough-element walkthrough-hero-image" ng-src="{{walkthroughHeroImage}}">',
                 '<div class="'+ DOM_TRANSCLUDE + '"></div>',
                 '</div>',
                 '</div>',
@@ -74,12 +76,14 @@ angular.module('ng-walkthrough', [])
                     hasBackdrop: '=?',
                     hasGlow: '=?',
                     useButton: '=?',
+                    walkthroughHeroImage: '@?',
                     iconPaddingLeft: '@?',
                     iconPaddingTop: '@?',
                     tipIconLocation: '@?',
                     tipColor: '@?',
                     onWalkthroughShow: '&',
-                    onWalkthroughHide: '&'
+                    onWalkthroughHide: '&',
+                    onWalkthroughContentClicked: '&'
                 },
                 link: function (scope, element, attrs, ctrl, $transclude) {
                     var getIcon = function(icon){

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-walkthrough",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "homepage": "https://github.com/souly1/ng-walkthrough",
   "authors": [
     "Ophir Stern <souly01@gmail.com>"