Skip to content

Commit 289c9de

Browse files
a19836a19836
committed
updating local files
0 parents  commit 289c9de

19 files changed

Lines changed: 3859 additions & 0 deletions

‎LICENSE.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
This is **multi-licensed**. You may choose to use it under **one of the following licenses**:
2+
3+
- **BSD 3-Clause License** or
4+
- **Apache License 2.0** or
5+
- **GNU LGPL v3** or
6+
- **[HLNC License](http://bloxtor.com/LICENSE_HLNC.md)**
7+
8+
Select the license that best fits your needs.
9+
10+
**This is 100% open to your needs!**
11+
12+
© 2025 [Bloxtor](http://bloxtor.com) and [Joao Pinto](http://jplpinto.com)

‎README.md‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
# JQuery My Tour Guide
2+
3+
> Original Repos:
4+
> - JQuery My Tour Guide: https://github.com/a19836/jquerymytourguide/
5+
> - Bloxtor: https://github.com/a19836/bloxtor/
6+
7+
## Overview
8+
9+
**JQuery My My Tour Guide** is a lightweight JavaScript library that extends the functionality of the [LikaloLLC Tourguide](https://github.com/LikaloLLC/tourguide.js?tab=readme-ov-file) library.
10+
It provides an easy way to create interactive guided tours for your web applications.
11+
12+
Check out a live example by opening [index.html](index.html).
13+
14+
Requirements:
15+
- jquery library
16+
17+
Additional details about **LikaloLLC Tourguide** can be found [here](lib/tourguide/README.md).
18+
19+
---
20+
21+
## Examples
22+
23+
- [Simple Tour Guide Example](./index.html)
24+
- [Tour Guide with steps defined in HTML attributes (`data-tour`)](./lib/tourguide/test/index_with_html_attribute.html)
25+
- [Tour Guide with steps defined in JavaScript](./lib/tourguide/test/index_with_js_steps.html)
26+
- [Tour Guide with steps defined on the server side (JSON)](./lib/tourguide/test/index_with_remote_steps.html)
27+
- [Example with images (JSFiddle)](https://jsfiddle.net/eugenetrue/q465gb7L/)
28+
29+
---
30+
31+
## Screenshots
32+
33+
- [example 1](./img/example_1.png)
34+
- [example 2](./img/example_2.png)
35+
- [example 3](./img/example_3.png)
36+
- [example 4](./img/example_4.png)
37+
- [example 5](./img/example_5.png)
38+
39+
---
40+
41+
## Usage
42+
43+
```html
44+
<html>
45+
<head>
46+
<!-- Add jquery lib -->
47+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
48+
49+
<!-- Add jquery tourguide lib -->
50+
<script language="javascript" type="text/javascript" src="lib/tourguide/tourguide.js"></script>
51+
52+
<!-- Add jquerymytourguide lib -->
53+
<script language="javascript" type="text/javascript" src="js/MyTourGuide.js"></script>
54+
</head>
55+
<body>
56+
<h1>More examples <a href="lib/tourguide/index.html" target="eg">here</a></h1>
57+
<ul>
58+
<li>
59+
<button class="btn">Button TEST 1</button>
60+
<button class="btn">Button TEST 2</button>
61+
<button class="btn2" style="display:none">Button TEST 3</button>
62+
</li>
63+
<li>
64+
<div class="msg">Some msg</div>
65+
</li>
66+
</ul>
67+
<div>
68+
<button onClick="MyTourGuide.restart()">Restart tour again</button>
69+
</div>
70+
71+
<script>
72+
var steps = [
73+
{
74+
"selector":".btn, .btn2",
75+
"title":"Tooltip Tour Guide",
76+
"content":"Create a new project by clicking in the blue button",
77+
},
78+
{
79+
"selector":".msg",
80+
"title":"Tooltip Tour Guide",
81+
"content":"then click the created project to select it..."
82+
}
83+
];
84+
85+
var options = {
86+
steps: steps,
87+
onStart: func1, //callback called when tourguide starts: func1(options);
88+
onStep: func2, //callback called when changing to another tourguide step: func2(current_step, type);
89+
onStop: func3, //callback called when tourguide stops: func3(options);
90+
onComplete: func4, //callback called when tourguide completes: func4();
91+
};
92+
MyTourGuide.init(options);
93+
MyTourGuide.start(); //(optional) to start on page load
94+
</script>
95+
</body>
96+
</html>
97+
```
98+
99+
## Other calls
100+
101+
Creates a second tourguide variable:
102+
```
103+
var MyTourGuide2 = new MyTourGuideClass();
104+
```
105+
106+
Gets the tourguide internal library from jquery:
107+
```
108+
var tg = MyTourGuide.tourguide;
109+
```
110+
111+
Gets the current active options when the tourguide was initialized:
112+
```
113+
var options = MyTourGuide.options
114+
```
115+
116+
Starts tourguide:
117+
```
118+
MyTourGuide.start(step_index); //step_index is optional.
119+
```
120+
121+
Stops tourguide:
122+
```
123+
MyTourGuide.stop();
124+
```
125+
126+
Completes tourguide:
127+
```
128+
MyTourGuide.complete();
129+
```
130+
131+
Restarts tourguide:
132+
```
133+
MyTourGuide.restart();
134+
```
135+
136+
Checks if tourguide is active:
137+
```
138+
MyTourGuide.isActive();
139+
```
140+
141+
Executes onStart callback:
142+
```
143+
MyTourGuide.onStart(options);
144+
```
145+
146+
Executes onStep callback:
147+
```
148+
MyTourGuide.onStep(current_step, type);
149+
```
150+
151+
Executes onStop callback:
152+
```
153+
MyTourGuide.onStop(options);
154+
```
155+
156+
Executes onComplete callback:
157+
```
158+
MyTourGuide.onComplete();
159+
```
160+
161+
Executes the steps callback:
162+
```
163+
MyTourGuide.prepareSteps(steps);
164+
```
165+
166+
Prepares tourguide with handlers and options. This is already called in the init method:
167+
```
168+
MyTourGuide.prepareTourguide();
169+
```
170+
171+
Prepare a step:
172+
```
173+
MyTourGuide.prepareStep(current_step, type);
174+
```
175+
176+
Prepare a step arrow:
177+
```
178+
MyTourGuide.prepareStepArrow(current_step);
179+
```
180+
181+
Get the step arrow position:
182+
```
183+
var position = MyTourGuide.getStepArrowPosition(current_step);
184+
```
185+
186+
Get the tourguide style:
187+
```
188+
var style = MyTourGuide.getStyle();
189+
190+
```
191+

‎img/example_1.png‎

54.5 KB
Loading

‎img/example_2.png‎

32.3 KB
Loading

‎img/example_3.png‎

154 KB
Loading

‎img/example_4.png‎

41.8 KB
Loading

‎img/example_5.png‎

81.1 KB
Loading

‎index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<html>
2+
<head>
3+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
4+
<script language="javascript" type="text/javascript" src="lib/tourguide/tourguide.js"></script>
5+
<script language="javascript" type="text/javascript" src="js/MyTourGuide.js"></script>
6+
</head>
7+
<body>
8+
<h1>Simple example</h1>
9+
<ul>
10+
<li>
11+
<button class="btn">Button TEST 1</button>
12+
<button class="btn">Button TEST 2</button>
13+
<button class="btn2" style="display:none">Button TEST 3</button>
14+
</li>
15+
<li>
16+
<div class="msg">Some msg</div>
17+
</li>
18+
</ul>
19+
<div>
20+
<button onClick="MyTourGuide.restart()">Restart tour again</button>
21+
</div>
22+
23+
<hr/>
24+
25+
<h3>Other examples:</h3>
26+
<ul>
27+
<li>
28+
<label>Steps are based in html attributes in each element (data-tour attribute): </label>
29+
<a href="lib/tourguide/test/index_with_html_attribute.html" target="index_with_html_attribute">check this example here</a>
30+
</li>
31+
<li>
32+
<label>Steps in written in javascript code: </label>
33+
<a href="lib/tourguide/test/index_with_js_steps.html" target="index_with_js_steps">check this example here</a>
34+
</li>
35+
<li>
36+
<label>Get Remote Steps: </label>
37+
<a href="lib/tourguide/test/index_with_remote_steps.html" target="index_with_remote_steps">check this example here</a>
38+
</li>
39+
</ul>
40+
41+
<script>
42+
var steps = [
43+
{
44+
"selector":".btn, .btn2",
45+
"title":"Tooltip Tour Guide",
46+
"content":"Create a new project by clicking in the blue button",
47+
},
48+
{
49+
"selector":".msg",
50+
"title":"Tooltip Tour Guide",
51+
"content":"then click the created project to select it..."
52+
}
53+
];
54+
55+
MyTourGuide.init({
56+
steps: steps
57+
});
58+
MyTourGuide.start();
59+
</script>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)