@@ -104,8 +104,8 @@ <h6 class="example-header"><i class="fa fa-bars"></i> Progress bar</h6>
104104 < p class ="example-description ">
105105 Add progress-bar to your step-by-step introduction. It's as easy as adding < code > showProgress</ code > option to your Intro.js instance (e.g. < code > introJs().setOption('showProgress', true).start();</ code > )
106106 </ p >
107- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
108- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
107+ < a class ="button " href ="/intro.js/example/hello-world/withProgress.html " target ="_blank "> Demo</ a >
108+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/withProgress.html " target ="_blank "> Source</ a >
109109 </ div >
110110 </ div >
111111 </ div >
@@ -117,8 +117,8 @@ <h6 class="example-header"><i class="fa fa-commenting-o"></i> Hint <span cl
117117 < p class ="example-description ">
118118 Hints are the new feature in Intro.js that enables you to add additional descriptions to any part of a web page. You can define hints by adding < code > data-hint</ code > attribute to the HTML elements.
119119 </ p >
120- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
121- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
120+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
121+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
122122 </ div >
123123 </ div >
124124 < div class ="one-half column ">
@@ -127,8 +127,8 @@ <h6 class="example-header"><i class="fa fa-code"></i> Programmatic Hint <sp
127127 < p class ="example-description ">
128128 You can add/alter hints using JavaScript objects (or JSON). Also, you can optionally bind a function to hint events (e.g. hint click, hint close)
129129 </ p >
130- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
131- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
130+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
131+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
132132 </ div >
133133 </ div >
134134 </ div >
@@ -140,8 +140,8 @@ <h6 class="example-header"><i class="fa fa-filter"></i> Enable/disable opti
140140 < p class ="example-description ">
141141 You can enable or disable options like buttons, progress-bar and bullets. It's really easy to enable or disable options, call the < code > option</ code > function and pass option name (e.g. < code > setOption('showBullets', false)</ code > )
142142 </ p >
143- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
144- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
143+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
144+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
145145 </ div >
146146 </ div >
147147 < div class ="one-half column ">
@@ -150,8 +150,8 @@ <h6 class="example-header"><i class="fa fa-code"></i> Programmatic</h6>
150150 < p class ="example-description ">
151151 Instead of adding < code > data-intro</ code > attribute, you can define your guide using JSON. There is a < code > steps</ code > option that accepts an array of steps.
152152 </ p >
153- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
154- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
153+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
154+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
155155 </ div >
156156 </ div >
157157 </ div >
@@ -163,8 +163,8 @@ <h6 class="example-header"><i class="fa fa-align-right"></i> Right to Left<
163163 < p class ="example-description ">
164164 If your website is right-to-left, you can use this example for your guides. This will change the direction of all introduction elements.
165165 </ p >
166- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
167- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
166+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
167+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
168168 </ div >
169169 </ div >
170170 < div class ="one-half column ">
@@ -173,8 +173,8 @@ <h6 class="example-header"><i class="fa fa-clone"></i> Multi-page guide</h6
173173 < p class ="example-description ">
174174 If your guide begins on a page and ends on another page, you can use multi-page option of Intro.js. This is a basic example of multi-page introductions.
175175 </ p >
176- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
177- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
176+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
177+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
178178 </ div >
179179 </ div >
180180 </ div >
@@ -186,8 +186,8 @@ <h6 class="example-header"><i class="fa fa-file-code-o"></i> HTML in toolti
186186 < p class ="example-description ">
187187 You can use all HTML tags for step's tooltip. For instance you can use < code > b</ code > or < code > code</ code > tags in tooltips.
188188 </ p >
189- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
190- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
189+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
190+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
191191 </ div >
192192 </ div >
193193 < div class ="one-half column ">
@@ -196,8 +196,8 @@ <h6 class="example-header"><i class="fa fa-magic"></i> Auto-positioning</h6
196196 < p class ="example-description ">
197197 Another great feature of Intro.js is that you can define the position of tooltip box. Furthermore, you can set < code > tooltipPosition</ code > to < code > auto</ code > to align the tooltip boxes automatically.
198198 </ p >
199- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
200- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
199+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
200+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
201201 </ div >
202202 </ div >
203203 </ div >
@@ -209,8 +209,8 @@ <h6 class="example-header"><i class="fa fa-commenting"></i> Floating guide<
209209 < p class ="example-description ">
210210 Also you can define a guide that doesn't focus on a specific element. This type of introductions can be defined using programmatic way.
211211 </ p >
212- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
213- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
212+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
213+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
214214 </ div >
215215 </ div >
216216 < div class ="one-half column ">
@@ -219,8 +219,8 @@ <h6 class="example-header"><i class="fa fa-gears"></i> Customize it</h6>
219219 < p class ="example-description ">
220220 There are some options to customize your guide for your website. One of them is < code > data-tooltipClass</ code > attribute that enables you to add custom CSS classes to your steps.
221221 </ p >
222- < a class ="button " href ="examples/landing " target ="_blank "> Demo</ a >
223- < a class ="button " href ="https://github.com/dhg/Skeleton/tree/gh-pages/examples/landing " target ="_blank "> Source</ a >
222+ < a class ="button " href ="/intro.js/example/hello-world/index.html " target ="_blank "> Demo</ a >
223+ < a class ="button " href ="https://github.com/usablica/intro.js/blob/master/example/hello-world/index.html " target ="_blank "> Source</ a >
224224 </ div >
225225 </ div >
226226 </ div >
0 commit comments