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
If you prefer to use a CDN to load the needed files, fullPage.js is in CDNJS:
105
105
https://cdnjs.com/libraries/fullPage.js
106
106
107
-
###Required HTML structure
107
+
###Required HTML structure
108
108
Start your HTML document with the compulsory [HTML DOCTYPE declaration](http://www.corelangs.com/html/introduction/doctype.html) on the 1st line of your HTML code. You might have troubles with sections heights otherwise. The examples provided use HTML 5 doctype `<!DOCTYPE html>`.
109
109
110
110
Each section will be defined with an element containing the `section` class.
@@ -135,7 +135,7 @@ In order to create a landscape slider within a section, each slide will be defin
135
135
````
136
136
You can see a fully working example of the HTML structure in the [`demoPage.html` file](https://github.com/alvarotrigo/fullPage.js/blob/master/examples/demoPage.html).
137
137
138
-
###Initialization
138
+
###Initialization
139
139
All you need to do is call fullPage.js inside a `$(document).ready` function:
140
140
141
141
```javascript
@@ -282,7 +282,7 @@ Fullpage.js adds multiple classes in different elements to keep a record of the
282
282
-`fp-destroyed` is added to the fullpage.js container when fullPage.js is destroyed.
283
283
-`fp-enabled` is added to the `html` element once the libary is initalized.
284
284
285
-
###Lazy Loading
285
+
###Lazy Loading
286
286
[Demo](http://codepen.io/alvarotrigo/pen/eNLBXo) fullPage.js provides a way to lazy load images, videos and audio elements so they won't slow down the loading of your site or unnecessarily waste data transfer.
287
287
When using lazy loading, all these elements will only get loaded when entering in the viewport.
288
288
To enable lazy loading all you need to do is change your `src` attribute to `data-src` as shown below:
@@ -297,7 +297,7 @@ To enable lazy loading all you need to do is change your `src` attribute to `dat
297
297
298
298
If you already use another lazy load solution which uses `data-src` as well, you can disable the fullPage.js lazy loading by setting the option `lazyLoading: false`.
299
299
300
-
###Auto play/pause embedded media
300
+
###Auto play/pause embedded media
301
301
302
302
**Note**: the autoplay feature might not work on some mobile devices depending on the OS and browser (i.e. [Safari on iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/) version < 10.0).
303
303
@@ -319,7 +319,7 @@ Embedded HTML5 `<video>` / `<audio>` and Youtube iframes are automatically paus
319
319
</audio>
320
320
```
321
321
322
-
###Use extensions
322
+
###Use extensions
323
323
fullpage.js [provides a set of extensions](http://alvarotrigo.com/fullPage/extensions/) you can use to enhance its default features. All of them are listed as [fullpage.js options](https://github.com/alvarotrigo/fullPage.js#options).
324
324
325
325
Extensions requires you to use the minified file [`jquery.fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/blob/master/dist/jquery.fullpage.extensions.min.js) that is inside the [`dist` folder](https://github.com/alvarotrigo/fullPage.js/tree/master/dist) instead of the usual fullPage.js file (`jquery.fullpage.js` or `jquery.fullpage.min.js`).
[Demo](http://codepen.io/alvarotrigo/pen/XbPNQv) You can see them in action [here](http://alvarotrigo.com/fullPage/examples/callbacks.html).
665
665
666
-
###afterLoad (`anchorLink`, `index`)
666
+
###afterLoad (`anchorLink`, `index`)
667
667
Callback fired once the sections have been loaded, after the scrolling has ended.
668
668
Parameters:
669
669
@@ -694,7 +694,7 @@ Example:
694
694
});
695
695
```
696
696
---
697
-
###onLeave (`index`, `nextIndex`, `direction`)
697
+
###onLeave (`index`, `nextIndex`, `direction`)
698
698
This callback is fired once the user leaves a section, in the transition to the new section.
699
699
Returning `false` will cancel the move before it takes place.
700
700
@@ -723,7 +723,7 @@ Example:
723
723
});
724
724
```
725
725
726
-
####Cancelling the scroll before it takes place
726
+
####Cancelling the scroll before it takes place
727
727
You can cancel the scroll by returning `false` on the `onLeave` callback:
728
728
729
729
```javascript
@@ -738,7 +738,7 @@ You can cancel the scroll by returning `false` on the `onLeave` callback:
738
738
```
739
739
740
740
---
741
-
###afterRender()
741
+
###afterRender()
742
742
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). See [FAQs](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions) for more info.
743
743
744
744
Example:
@@ -752,7 +752,7 @@ Example:
752
752
});
753
753
```
754
754
---
755
-
###afterResize()
755
+
###afterResize()
756
756
This callback is fired after resizing the browser's window. Just after the sections are resized.
757
757
758
758
Example:
@@ -766,7 +766,7 @@ Example:
766
766
});
767
767
```
768
768
---
769
-
###afterResponsive(`isResponsive`)
769
+
###afterResponsive(`isResponsive`)
770
770
This callback is fired after fullpage.js changes from normal to responsive mode or from responsive mode to normal mode.
This callback is fired once the user leaves an slide to go to another, in the transition to the new slide.
823
823
Returning `false` will cancel the move before it takes place.
824
824
@@ -851,7 +851,7 @@ Example:
851
851
});
852
852
```
853
853
854
-
####Cancelling a move before it takes place
854
+
####Cancelling a move before it takes place
855
855
You can cancel a move by returning `false` on the `onSlideLeave` callback. [Same as when canceling a movement with `onLeave`](https://github.com/alvarotrigo/fullPage.js#cancelling-the-scroll-before-it-takes-place).
0 commit comments