You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The plugin is in its first version and will keep improving with the time.
12
-
Suggestion will be more than welcome, not only for requisites requests but also for coding improvements.
11
+
The plugin is in its first version and will keep improving with time.
12
+
Suggestion are more than welcome, not only for feature requests but also for coding style improvements.
13
13
14
-
Let's make of this a great plugin to make the world easier!
14
+
Let's make this a great plugin to make people's lives easier!
15
15
16
-
Working under all modern browsers as well as old ones such as IE8, Opera 12...
16
+
fullPage.js is fully functional on all modern browsers, as well as some old ones such as IE8 and Opera 12.
17
17
18
18
## Usage
19
-
As you can see in the `example.html` file, you will need to include the javascript file `jquery.fullPage.js` (or the minified version `jquery.fullPage.min.js`) and the css file `jquery.fullPage.css`
20
-
of the plugin as well as [jQuery library](http://jquery.com/) (and the [jQuery UI library](http://jqueryui.com/) in case you want to use easing effects. (active by default))
19
+
As you can see in the `example.html` file, you will need to include the JavaScript file `jquery.fullPage.js` (or the minified version `jquery.fullPage.min.js`) and the css file `jquery.fullPage.css` of the plugin, as well as [jQuery](http://jquery.com/). Optionally, you can add the [jQuery UI library](http://jqueryui.com/) in case you want to use easing effects (this is active by default).
21
20
22
21
###Including files:
23
22
```html
@@ -26,21 +25,20 @@ of the plugin as well as [jQuery library](http://jquery.com/) (and the [jQuery U
Each section will be defined with a `div` containing the `section` class.
38
36
The active section by default will be the first section, which is taken as the home page.
39
37
```html
40
-
<divclass="section">WHATEVER</div>
41
-
<divclass="section">WHATEVER</div>
42
-
<divclass="section">WHATEVER</div>
43
-
<divclass="section">WHATEVER</div>
38
+
<divclass="section">Some section</div>
39
+
<divclass="section">Some section</div>
40
+
<divclass="section">Some section</div>
41
+
<divclass="section">Some section</div>
44
42
```
45
43
46
44
In order to create a landscape slider within a section, each slide will be defined with another `div`:
@@ -52,18 +50,18 @@ In order to create a landscape slider within a section, each slide will be defin
52
50
<divclass="slide"> Slide 4 </div>
53
51
</div>
54
52
````
55
-
You can see a full example of the HTML structure in the [`example.html` file](https://github.com/alvarotrigo/fullPage.js/blob/master/example.html).
53
+
You can see a fully working example of the HTML structure in the [`example.html` file](https://github.com/alvarotrigo/fullPage.js/blob/master/example.html).
56
54
57
55
###Initialization
58
-
Then, you will only need to call the plugin inside `$(document).ready` function:
56
+
All you need to do is call the plugin inside a `$(document).ready` function:
59
57
60
58
```javascript
61
59
$(document).ready(function() {
62
60
$.fn.fullpage();
63
61
});
64
62
```
65
63
66
-
A more complex initialization with all options could look like this:
64
+
A more complex initialization with all options set could look like this:
In order to create links to certain slides inside a section, you could do it by just adding two attributes to any element:
95
-
- class="toSlide"
96
-
- data-index="3" (or whatever slide number you want to link)
93
+
-`class="toSlide"`
94
+
-`data-index="3"` (or whatever slide number you want to link)
97
95
98
96
For example:
99
97
```html
100
98
<spanclass="toSlide"data-index="3">Click here to go to slide 3</span>
101
99
```
102
-
[Living example](http://jsfiddle.net/7PwsS/15/)
100
+
[Live example](http://jsfiddle.net/7PwsS/15/)
103
101
104
102
To create links between sections, you could use the `menu` option and make use of anchor links (#) as explained below in the options section.
105
103
@@ -119,21 +117,18 @@ $.fn.fullpage({
119
117
```
120
118
121
119
-`easing`: (default `easeInQuart`) Defines the transition effect to use for the vertical scrolling.
122
-
It requieres [jQuery UI library](http://jqueryui.com/)in case of using some of its transitions. Other library could be used instead.
120
+
It requieres [jQuery UI](http://jqueryui.com/)for using some of its transitions. Other libraries could be used instead.
123
121
124
122
-`loopTop`: (default `false`) Defines whether scrolling up in the first section should scroll to the last one or not.
125
123
126
124
-`loopBottom`: (default `false`) Defines whether scrolling down in the last section should scroll to the first one or not.
127
125
128
-
-`css3`: (default `false`). Defines wheter to use javascript or CSS3 transforms to scroll within sections and slides. Useful to speed up the movement in
129
-
tablet and mobile devices with browsers supporting CSS3.
126
+
-`css3`: (default `false`). Defines wheter to use JavaScript or CSS3 transforms to scroll within sections and slides. Useful to speed up the movement in tablet and mobile devices with browsers supporting CSS3.
130
127
131
-
-`autoScrolling`: (default `true`) Defines whether to use the "automatic" scrolling or the "normal" one. It also
132
-
has influence on the way the sections fit the browser/device window in tablets and mobile phones.
128
+
-`autoScrolling`: (default `true`) Defines whether to use the "automatic" scrolling or the "normal" one. It also has affects the way the sections fit in the browser/device window in tablets and mobile phones.
133
129
134
-
-`menu`: (default `false`) A selector can be used to specify the menu to link with the slides. This way
135
-
the scrolling of the slides will activate the corresponding element in the menu using the class `active`.
136
-
This won't generate a menu but will just add the `active` class to the element in the given menu with the corresponding anchor link.
130
+
-`menu`: (default `false`) A selector can be used to specify the menu to link with the slides. This way the scrolling of the slides will activate the corresponding element in the menu using the class `active`.
131
+
This won't generate a menu but will just add the `active` class to the element in the given menu with the corresponding anchor links.
137
132
In order to link the elements of the menu with the slides, an HTML 5 data-tag (`data-menuanchor`) will be needed to use with the same anchor links as
138
133
used within the sections. Example:
139
134
```html
@@ -151,12 +146,12 @@ $.fn.fullpage({
151
146
});
152
147
```
153
148
154
-
-`navigation`: (default `false`) If sets to `true`, it will show a navigation bar composed by small circles.
149
+
-`navigation`: (default `false`) If set to `true`, it will show a navigation bar made up of small circles.
155
150
156
-
-`navigationPosition`: (default `right`) It can be set to `left` or `right` and defines in which position the navigation bar will be shown in case of using one.
151
+
-`navigationPosition`: (default `right`) It can be set to `left` or `right` and defines which position the navigation bar will be shown (if using one).
157
152
158
-
-`scrollOverflow`: (default `false`) defines whether or not to create an scroll for the section in case its content is bigger than the height of it.
159
-
In case of setting it to `true`, it requieres the vendor plugin `jquery.slimscroll.min` and it should be loaded before fullPaje.js plugin. For example:
153
+
-`scrollOverflow`: (default `false`) defines whether or not to create a scroll for the section in case its content is bigger than the height of it.
154
+
In case of setting it to `true`, it requieres the vendor plugin [`jquery.slimscroll.min`](https://github.com/rochal/jQuery-slimScroll) and it should be loaded before the fullPaje.js plugin. For example:
Defines the way the page scrolling behaves. If it is set to `true`, it will use the "automatic" scrolling,
196
-
otherwise, it will use the "manual" or "normal" scrolling of the site. Be careful when combining this option with
197
-
`scrollOverflow` set to true, as it might be difficult to scroll using the mouse wheel or the trackpad when the section
198
-
is scrollable.
190
+
Defines the way the page scrolling behaves. If it is set to `true`, it will use the "automatic" scrolling, otherwise, it will use the "manual" or "normal" scrolling of the site. Be careful when combining this option with `scrollOverflow` set to true, as it might be difficult to scroll using the mouse wheel or the trackpad when the section is scrollable.
199
191
200
192
```javascript
201
193
$.fn.fullpage.setAutoScrolling('false');
202
194
```
203
195
204
196
## Callbacks
205
197
**afterLoad** (`anchorLink`, `index`)
206
-
Callback fired once the sections has been loaded, once the scrolling has ended.
198
+
Callback fired once the sections have been loaded, after the scrolling has ended.
207
199
Parameters:
208
200
209
201
-`anchorLink`: anchorLink corresponding to the section.
@@ -253,8 +245,7 @@ Example:
253
245
254
246
255
247
**afterRender** ()
256
-
This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or
257
-
fire any code which requieres the document to be ready. (as this plugin modifies the document DOM to create the resulting structure)
248
+
This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).
0 commit comments