PHPackages vsilva472/jquery-timeline - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. vsilva472/jquery-timeline ActiveLibrary[Utility & Helpers](/categories/utility) vsilva472/jquery-timeline ========================= A simple and customizable jquery plugin to create responsive timelines 1.0.6(6y ago)23MITJavaScript Since May 11Pushed 5y ago1 watchersCompare [ Source](https://github.com/vsilva472/jquery-timeline)[ Packagist](https://packagist.org/packages/vsilva472/jquery-timeline)[ RSS](/packages/vsilva472-jquery-timeline/feed)WikiDiscussions master Synced today READMEChangelog (6)DependenciesVersions (6)Used By (0) jQuery Timeline =============== [](#jquery-timeline) [![license](https://camo.githubusercontent.com/151e312fc737b7f483670894fe2525237ea50ee0d23abc66fca5819b9e8b7dc3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f7673696c76613437322f6a71756572792d74696d656c696e652e7376673f7374796c653d666c61742d737175617265)](https://github.com/vsilva472/jquery-timeline/blob/master/LICENSE) [![Release](https://camo.githubusercontent.com/63a43298619cc20eefa37e09909a08d1537f9ab4e540dfb9d8fb9dc507bcb729/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f7673696c76613437322f6a71756572792d74696d656c696e652e7376673f7374796c653d666c61742d737175617265)](https://github.com/vsilva472/jquery-timeline/releases) [![](https://camo.githubusercontent.com/2e0cf0907bf07acbb1003fb8e84b5a2ae1d2790d90cf7d09c1c33b6ec6da486e/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f407673696c76613437322f6a71756572792d74696d656c696e652f6261646765)](https://www.jsdelivr.com/package/npm/@vsilva472/jquery-timeline) [![npm](https://camo.githubusercontent.com/95292c556bfe437db57d22d6e70ac42e399c9861b06bccb31839ca3b9f7d2b1d/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f407673696c76613437322f6a71756572792d74696d656c696e652e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@vsilva472/jquery-timeline) A dead simple jQuery plugin to create responsives timelines with only ~3kb. You can find some online samples of usage [here](https://vsilva472.github.io/jquery-timeline/samples/index.html). Content ------- [](#content) - [Browser Support](#browser-support) - [installation](#installation) - [Git](#git-installation) - [NPM](#npm-installation) - [Composer](#composer-installation) - [CDN](#CDN-installation) - [Default Options](#default-options) - [Usage](#usage) - [Via data-attributes](#using-with-default-data-selectors) - [Via css classes](#using-with-css-class-selectors) - [Mixed Selectors](#using-with-mixed-selectors) - [Using a custom transformer](#using-a-custom-transformer) - [Events](#events) - [Advanced usage](#advanced-usage) - [Display a loading](#display-a-loading) - [Customizing appearance](#customizing-appearance) - [Animations](#animations) - [Fetching from Laravel](#fetching-from-laravel) - [Google Analytics Integration](#google-analytics-integration) - [Google TagManager Integration](#google-tagmanager-integration) - [Donate](#donate) Browser Support --------------- [](#browser-support) [![Internet Explorer](https://user-images.githubusercontent.com/4265802/60848376-bf7bdc80-a1bc-11e9-89db-5637ebad0352.png)](https://user-images.githubusercontent.com/4265802/60848376-bf7bdc80-a1bc-11e9-89db-5637ebad0352.png)[![Chrome](https://user-images.githubusercontent.com/4265802/60848375-bee34600-a1bc-11e9-82bd-ab65ee37dd52.png)](https://user-images.githubusercontent.com/4265802/60848375-bee34600-a1bc-11e9-82bd-ab65ee37dd52.png)[![Firefox](https://user-images.githubusercontent.com/4265802/60848374-bee34600-a1bc-11e9-84d3-7338811bf48d.png)](https://user-images.githubusercontent.com/4265802/60848374-bee34600-a1bc-11e9-84d3-7338811bf48d.png)[![Opera](https://user-images.githubusercontent.com/4265802/60848373-bee34600-a1bc-11e9-9eb0-f72e9a75a14b.png)](https://user-images.githubusercontent.com/4265802/60848373-bee34600-a1bc-11e9-9eb0-f72e9a75a14b.png)[![Safari](https://user-images.githubusercontent.com/4265802/60848372-be4aaf80-a1bc-11e9-8c4e-680f7c0f21e4.png)](https://user-images.githubusercontent.com/4265802/60848372-be4aaf80-a1bc-11e9-8c4e-680f7c0f21e4.png)IE 10+ ✔Last ✔Last ✔Last ✔Last ✔installation ------------ [](#installation) ##### Git installation [](#git-installation) `git clone git@github.com:vsilva472/jquery-timeline.git` (SSH) ou `git clone https://github.com/vsilva472/jquery-timeline.git` (HTTPS) ##### NPM installation [](#npm-installation) `npm i @vsilva472/jquery-timeline --save` ##### Composer installation [](#composer-installation) `composer require vsilva472/jquery-timeline` ##### CDN installation [](#cdn-installation) `` `` Default options --------------- [](#default-options) ``` $.fn.timeline.defaults = { container : '[data-timeline]', apiUrl: null, allowRawContent: false, transformer: function (data) { return data; } }; ``` AttributeTypeDefaultDescriptioncontainerString`'[data-timeline]'`The HTML element to render the timelineapiUrlString`null`The url to fetch timeline dataallowRawContentbool`false`Tell to plugin if it should use .html() or .text() to prevent XSStransformercallback`function (data) { return data; }`The transformer to transform the data comming from ajax request**Note:** You can set `allowRawContent` via data-attribute from the container element just adding the attribute `data-timeline-allow-raw-content` to the element container. ``` ``` Usage ----- [](#usage) ### Using with default data selectors [](#using-with-default-data-selectors) ``` ``` **Note** You should call `$('selector').timeline(options)` only if you are using jQuery timeline without `data-attributes` ### Using with css class selectors [](#using-with-css-class-selectors) ``` $('.my-timeline').timeline({ apiUrl: 'https://yourapi/fetch/timeline/data', allowRawContent: true }); ``` ### Using with mixed selectors [](#using-with-mixed-selectors) ``` $('.my-timeline').timeline({ apiUrl: 'https://yourapi/fetch/timeline/data', }); ``` The sample above is equivalent to the following configuration ``` $.fn.timeline.defaults = { container : '.my-timeline', apiUrl: 'https://yourapi/fetch/timeline/data', allowRawContent: true }; ``` ### Using a custom transformer [](#using-a-custom-transformer) By default jQuery Timeline expect that data received from the ajax request has the following structure: ``` { [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. ``` (function ($) { const myOwnTransformer = (data) => { var transformed = {}; data.forEach(item => { if (!transformed[item.year]) transformed[item.year] = []; transformed[item.year].push({ year: item.year, title: item.caption, description: item.text || null, link: item.url || null, image: item.img || null, }); }); return transformed; }; $(".custom-transformer-timeline").timeline({ container: '.custom-transformer-timeline', apiUrl: 'api-2.json', transformer: myOwnTransformer }); $(".custom-transformer-timeline").on('timeline.after.generate', function () { $(this).addClass('timeline'); }); })(jQuery); ``` Events ------ [](#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. EventDescriptionArguments`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 -------------- [](#advanced-usage) See bellow some jQuery Timeline advanced usage samples ### Display a loading [](#display-a-loading) ``` .hide { display: none; } Please wait... $("[data-timeline]").on('timeline.ajax.before timeline.after.generate', function () { $('.loading').toggleClass('hide'); }); ``` ### Animations [](#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. ``` .timeline-item { opacity: 0; animation: fadeIn .3s; animation-fill-mode: forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } (function ($) { $('[data-timeline]').on( 'timeline.after.generate', function ( e, response ) { // delay(in seconds) before starts the animation of a item var delay = 0.1; $('.timeline-item').each(function () { $(this).css('animation-delay', delay + 's'); delay += 0.1; }); }); } (jQuery)); ``` ### Customizing appearance [](#customizing-appearance) If you want to customize the elements of the timeline you should overwrite some css values in the following css classes. ``` /* 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 [](#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 ``` $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); ``` ### Google Analytics Integration [](#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 ``` $('.season-timelines').on( 'timeline.after.generate', function ( e, response ) { ga( 'send', 'event', 'timeline', 'show', $(this).attr('id')); }); ``` ### Google TagManager Integration [](#google-tagmanager-integration) The bellow sample ilustrates the situation above but using Google TagManager. ``` $('.season-timelines').on( 'timeline.after.generate', function ( e, response ) { dataLayer.push({ event: 'sendToGA', eventCategory: 'timeline', eventAction: 'show', eventLabel: $(this).attr('id') }); }); ``` ### Donate [](#donate) Support this project donating some **HTMLCOIN** Wallet: **HqgaiK6T1o2JP4p3p34CZp2g3XnSsSdCXp** [![Donate HTMLCoin](https://camo.githubusercontent.com/e61dbbdfd04786128d92a39d5c4b4956ea23c4af8e61b0e2516eed029627a10c/68747470733a2f2f7777772e76696e69636975736465736f757a612e636f6d2e62722f696d672f68746d6c636f696e2e706e67)](https://camo.githubusercontent.com/e61dbbdfd04786128d92a39d5c4b4956ea23c4af8e61b0e2516eed029627a10c/68747470733a2f2f7777772e76696e69636975736465736f757a612e636f6d2e62722f696d672f68746d6c636f696e2e706e67) #### Licença [](#licença) MIT ### Health Score 26 — LowBetter than 41% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity6 Limited adoption so far Community7 Small or concentrated contributor base Maturity60 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~9 days Total 5 Last Release 2207d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/4265802?v=4)[Vinicius Silva](/maintainers/vsilva472)[@vsilva472](https://github.com/vsilva472) --- Top Contributors [![vsilva472](https://avatars.githubusercontent.com/u/4265802?v=4)](https://github.com/vsilva472 "vsilva472 (15 commits)") ### Embed Badge ![Health badge](/badges/vsilva472-jquery-timeline/health.svg) ``` [![Health](https://phpackages.com/badges/vsilva472-jquery-timeline/health.svg)](https://phpackages.com/packages/vsilva472-jquery-timeline) ``` ### Alternatives [bhaktaraz/php-rss-generator Simple RSS generator library for PHP 5.5 or later. 62134.2k1](/packages/bhaktaraz-php-rss-generator) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)