```
## Usage
### Using with default data selectors
```html
```
**Note** You should call `$('selector').timeline(options)` only if you are using jQuery timeline without `data-attributes`
### Using with css class selectors
```html
```
### Using with mixed selectors
```html
```
The sample above is equivalent to the following configuration
```javascript
$.fn.timeline.defaults = {
container : '.my-timeline',
apiUrl: 'https://yourapi/fetch/timeline/data',
allowRawContent: true
};
```
### Using a custom transformer
By default jQuery Timeline expect that data received from the ajax request has the following structure:
```javascript
{
[year: String] : [
{
title: String
image: String | null,
description: String | null,
link: String | null
}
],
(...)
}
Example:
{
"1999" :
[
{
title: 'Lorem ipsum'
image: null
description: 'Lorem ipsum dolor sit amet'
link: 'http://www.google.com'
}
]
}
```
But each api has your own logic and return your own format, fortunately jQuery Timeline has a method to transform your data before render the content.
In this cases you should provide your own transformer witch will adapt the data to the structure described above.
Inside `/samples` folder you can find a sample that describes this scenario.
```html
```
## Events
jQuery Timeline has a powerful events API that make it extensible and flexible to be integrated with any html page or framework that has jQuery installed.
Event | Description | Arguments
--- | --- | --- |
`timeline.start` | Triggered right before initialization | `{}`
`timeline.ajax.before` | Triggered before the ajax call | `{}`
`timeline.ajax.fail ` | Triggered when ajax fail and receive | `{ jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown }`
`timeline.ajax.complete` | Triggered when ajax is completed (success or fail) | `{}`
`timeline.before.generate` | Triggered before build HTML structure and before append it to DOM | `{}`
`timeline.after.generate` | Triggered after build HTML structure and after append it to DOM | `{}`
## Advanced Usage
See bellow some jQuery Timeline advanced usage samples
### Display a loading
```html
Please wait...
```
### Animations
jQuery Timeline applies the css class `.timeline-item` to each item of the timeline. This open the opportunity of to do some animations on these items with jQuery and/or CSS.
```html
```
### Customizing appearance
If you want to customize the elements of the timeline you should overwrite some css values in the following css classes.
```css
/* Responsible for year label style */
.timeline-year-label {}
/* Responsible for timeline item title */
.timeline-item-title {}
/* Responsible for timeline line (center on desktop and left on mobile)*/
.timeline::before {}
/* Responsible for the image (if an item have one)*/
.timeline-item-image {}
/* Responsible for the description of an item */
.timeline-item-description {}
/* Responsible for the timeline "dot" at the end of line */
.timeline-end {}
```
### Fetching from Laravel
In some frameworks like Laravel is a common practice the usage of a `CSRF-TOKEN` for security reasons. This sample shows you how to add `X-CSRF-TOKEN` before plugin make the request
```html
```
### Google Analytics Integration
Maybe could be interesting to BI team extract some timeline usage informations. The following sample show how you can use jQuery Timeline event's api to send some events to Google Analytics
```html
```
### Google TagManager Integration
The bellow sample ilustrates the situation above but using Google TagManager.
```html
```
### Donate
Support this project donating some **HTMLCOIN**
Wallet: **[HqgaiK6T1o2JP4p3p34CZp2g3XnSsSdCXp](htmlcoin:HqgaiK6T1o2JP4p3p34CZp2g3XnSsSdCXp?label=Doa%C3%A7%C3%B5es%20Github)**
#### Licença
MIT