jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 Commits
33 Branches
806 MiB
Tree: 81d958c161
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '81d958c161'
${ noResults }
jrtechs-vis/timeline_examples.html

404 lines
18 KiB
Raw Normal View History

initial commit, removed from vis develop branch
10 years ago
​
added google analytics
9 years ago
Feat: Improving timeline example overview (#2526) * Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago
​
​
​
​
​
​
​
​
​
initial commit, removed from vis develop branch
10 years ago
​
​
​
​
​
Feat: Improving timeline example overview (#2526) * Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago
initial commit, removed from vis develop branch
10 years ago
updated css, added images for examples
10 years ago
initial commit, removed from vis develop branch
10 years ago
fixed timeline examples preview images (#2050)
8 years ago
​
​
Feat: Improving timeline example overview (#2526) * Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago
​
​
​
added smooth scroll, changed styling updated examples etc
10 years ago
Feat: Improving timeline example overview (#2526) * Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago
​
​
added smooth scroll, changed styling updated examples etc
10 years ago
Feat: Improving timeline example overview (#2526) * Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago
​
​
​
​
​
​
​
​
​
added smooth scroll, changed styling updated examples etc
10 years ago
​
Feat: Improving timeline example overview (#2526) * Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago
added smooth scroll, changed styling updated examples etc
10 years ago
initial commit, removed from vis develop branch
10 years ago
Feat: Improving timeline example overview (#2526) * Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago
made the examples pretty :)
9 years ago
​
​
​
​
​
Feat: Improving timeline example overview (#2526) * Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
made the examples pretty :)
9 years ago
Updated the page timeline_examples.html
9 years ago
Feat: Improving timeline example overview (#2526) * Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
fixed minor issues on the timeline example overview page (#1958) * fixed typo in timeline example page; fixes #1797 * fixes #1937 * removed garbage html tags. * removed `vis.js`and `vis.css` because there are no timeline to show on this overview.
8 years ago
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script>
  4.   <meta charset="utf-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>Timeline Examples</title>
  8.   <link rel="icon" HREF="favicon.ico">
  9.   <!-- Bootstrap -->
  10.   <link href="./css/bootstrap.css" rel="stylesheet">
  11. 

  12.   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  13.   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  14.     <!--[if lt IE 9]>

  15.     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  16.     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  17.     <![endif]-->
  18. 

  19.     <link href="./css/prettify.css" rel="stylesheet" type="text/css" />
  20. 

  21.     <script type="text/javascript" src="./js/prettify/prettify.js"></script>
  22.     <link href="./css/examples.css" rel="stylesheet" type="text/css" />
  23. 

  24.     <script src="./dist/vis.js"></script>
  25.     <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
  26. 

  27.   </head>
  28.   <body>
  29.     <div class="navbar-wrapper">
  30.       <div class="container">
  31.         <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  32.           <div class="container">
  33.             <div class="navbar-header">
  34.               <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
  35.             </div>
  36.             <div id="navbar" class="navbar-collapse collapse">
  37.               <ul class="nav navbar-nav">
  38.                 <li class="active"><a href="./index.html#modules">Modules</a></li>
  39.                 <li><a href="./index.html#download_install">Download</a></li>
  40.                 <li><a href="./showcase/index.html">Showcase</a></li>
  41.                 <li><a href="./index.html#contribute">Contribute</a></li>
  42.                 <li><a href="./index.html#licenses">License</a></li>
  43.               </ul>
  44.             </div>
  45.           </div>
  46.         </nav>
  47. 

  48.       </div>
  49.     </div>
  50. 

  51.     <div class="contentWrapper">
  52.     <div id="networkContainer"></div>
  53.     <div id="contentContainer">
  54.         <h1>Timeline Examples</h1>
  55.         This page contains examples which show how to use Timeline. For the documentation, please click the button below: <br><br>
  56.         <a class="btn btn-primary" href="./docs/timeline" role="button">View docs »</a>
  57. 

  58.     <h3>basic usage</h3>
  59.     <div class="container-fluid">
  60.       <div class="col-lg-2 col-md-3 col-sm-6">
  61.         <a href="examples/timeline/editing/updateDataOnEvent.html">
  62.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/basicUsage.png">
  63.           <div class="exampleTitle">basic usage</div>
  64.         </a>
  65.       </div>
  66.     </div>
  67. 

  68.     <h3>data handling</h3>
  69.     <div class="container-fluid">
  70.       <div class="col-lg-2 col-md-3 col-sm-6">
  71.         <a href="examples/timeline/dataHandling/dataSerialization.html">
  72.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/dataHandling/dataSerialization.png">
  73.           <div class="exampleTitle">data serialization</div>
  74.         </a>
  75.       </div>
  76. 

  77.        <div class="col-lg-2 col-md-3 col-sm-6">
  78.         <a href="examples/timeline/dataHandling/loadExternalData.html">
  79.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/dataHandling/loadExternalData.png">
  80.           <div class="exampleTitle">load external data</div>
  81.         </a>
  82.       </div>
  83.     </div>
  84. 

  85.     <h3>editing</h3> 
  86.     <div class="container-fluid">
  87.       <div class="col-lg-2 col-md-3 col-sm-6">
  88.         <a href="examples/timeline/editing/customSnappingOfItems.html">
  89.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/customSnappingOfItems.png">
  90.           <div class="exampleTitle">data serialization</div>
  91.         </a>
  92.       </div>
  93. 

  94.       <div class="col-lg-2 col-md-3 col-sm-6">
  95.         <a href="examples/timeline/editing/editingItems.html">
  96.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/editingItems.png">
  97.           <div class="exampleTitle">editing items</div>
  98.         </a>
  99.       </div>
  100. 

  101.       <div class="col-lg-2 col-md-3 col-sm-6">
  102.         <a href="examples/timeline/editing/editingItemsCallbacks.html">
  103.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/editingItemsCallbacks.png">
  104.           <div class="exampleTitle">editing items callbacks</div>
  105.         </a>
  106.       </div>
  107. 

  108.       <div class="col-lg-2 col-md-3 col-sm-6">
  109.         <a href="examples/timeline/editing/individualEditableItems.html">
  110.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/individualEditableItems.png">
  111.           <div class="exampleTitle">individual editable items</div>
  112.         </a>
  113.       </div>
  114. 

  115.        <div class="col-lg-2 col-md-3 col-sm-6">
  116.         <a href="examples/timeline/editing/updateDataOnEvent.html">
  117.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/updateDataOnEvent.png">
  118.           <div class="exampleTitle">update data on event</div>
  119.         </a>
  120.       </div>
  121. 

  122.       <div class="col-lg-2 col-md-3 col-sm-6">
  123.         <a href="examples/timeline/editing/tooltipOnItemChange.html">
  124.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png">
  125.           <div class="exampleTitle">tooltip on item change</div>
  126.         </a>
  127.       </div>
  128.     </div>
  129. 

  130.     <h3>groups</h3>
  131.     <div class="container-fluid">
  132.       <div class="col-lg-2 col-md-3 col-sm-6">
  133.         <a href=examples/timeline/groups/groups.html>
  134.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/groups.png">
  135.           <div class="exampleTitle">groups</div>
  136.         </a>
  137.       </div>
  138. 

  139.       <div class="col-lg-2 col-md-3 col-sm-6">
  140.         <a href="examples/timeline/groups/groupsEditable.html">
  141.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/groupsEditable.png">
  142.           <div class="exampleTitle">groups editable</div>
  143.         </a>
  144.       </div>
  145. 

  146.       <div class="col-lg-2 col-md-3 col-sm-6">
  147.         <a href="examples/timeline/groups/groupsOrdering.html">
  148.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/groupsOrdering.png">
  149.           <div class="exampleTitle">groups ordering</div>
  150.         </a>
  151.       </div>
  152. 

  153.       <div class="col-lg-2 col-md-3 col-sm-6">
  154.         <a href="examples/timeline/groups/subgroups.html">
  155.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/subgroups.png">
  156.           <div class="exampleTitle">subgroups</div>
  157.         </a>
  158.       </div>
  159. 

  160.       <div class="col-lg-2 col-md-3 col-sm-6">
  161.         <a href=examples/timeline/groups/verticalItemsHide.html>
  162.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/verticalItemsHide.png">
  163.           <div class="exampleTitle">vertical items hide</div>
  164.         </a>
  165.       </div>
  166.     </div>
  167. 

  168.     <h3>interaction</h3>
  169.     <div class="container-fluid">
  170.       <div class="col-lg-2 col-md-3 col-sm-6">
  171.         <a href="examples/timeline/interaction/animateWindow.html">
  172.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/animateWindow.png">
  173.           <div class="exampleTitle">animate window</div>
  174.         </a>
  175.       </div>
  176. 

  177.        <div class="col-lg-2 col-md-3 col-sm-6">
  178.         <a href="examples/timeline/interaction/clickToUse.html">
  179.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/clickToUse.png">
  180.           <div class="exampleTitle">click to use</div>
  181.         </a>
  182.       </div>
  183. 

  184.        <div class="col-lg-2 col-md-3 col-sm-6">
  185.         <a href="examples/timeline/interaction/eventListeners.html">
  186.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/eventListeners.png">
  187.           <div class="exampleTitle">event listeners</div>
  188.         </a>
  189.       </div>
  190. 

  191.        <div class="col-lg-2 col-md-3 col-sm-6">
  192.         <a href="examples/timeline/interaction/limitMoveAndZoom.html">
  193.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/limitMoveAndZoom.png">
  194.           <div class="exampleTitle">limit move and zoom</div>
  195.         </a>
  196.       </div>
  197. 

  198.        <div class="col-lg-2 col-md-3 col-sm-6">
  199.         <a href="examples/timeline/interaction/navigationMenu.html">
  200.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/navigationMenu.png">
  201.           <div class="exampleTitle">navigation menu</div>
  202.         </a>
  203.       </div>
  204. 

  205.        <div class="col-lg-2 col-md-3 col-sm-6">
  206.         <a href="examples/timeline/interaction/setSelection.html">
  207.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/setSelection.png">
  208.           <div class="exampleTitle">set selection</div>
  209.         </a>
  210.       </div>
  211.     </div>
  212. 

  213.     <h3>items</h3>
  214.     <div class="container-fluid">
  215.       <div class="col-lg-2 col-md-3 col-sm-6">
  216.         <a href="examples/timeline/items/backgroundAreas.html">
  217.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/backgroundAreas.png">
  218.           <div class="exampleTitle">background areas</div>
  219.         </a>
  220.       </div>
  221. 

  222.       <div class="col-lg-2 col-md-3 col-sm-6">
  223.         <a href="examples/timeline/items/backgroundAreasWithGroups.html">
  224.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/backgroundAreasWithGroups.png">
  225.           <div class="exampleTitle">background areas with groups</div>
  226.         </a>
  227.       </div>
  228. 

  229.       <div class="col-lg-2 col-md-3 col-sm-6">
  230.         <a href="examples/timeline/items/htmlContents.html">
  231.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/htmlContents.png">
  232.           <div class="exampleTitle">html contents</div>
  233.         </a>
  234.       </div>
  235. 

  236.       <div class="col-lg-2 col-md-3 col-sm-6">
  237.         <a href="examples/timeline/items/itemOrdering.html">
  238.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/itemOrdering.png">
  239.           <div class="exampleTitle">item ordering</div>
  240.         </a>
  241.       </div>
  242. 

  243.       <div class="col-lg-2 col-md-3 col-sm-6">
  244.         <a href="examples/timeline/items/pointItems.html">
  245.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/pointItems.png">
  246.           <div class="exampleTitle">point items</div>
  247.         </a>
  248.       </div>
  249. 

  250.       <div class="col-lg-2 col-md-3 col-sm-6">
  251.         <a href="examples/timeline/items/rangeOverflowItem.html">
  252.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/rangeOverflowItem.png">
  253.           <div class="exampleTitle">range over flow item</div>
  254.         </a>
  255.       </div>
  256.     </div>
  257. 

  258.     <h3>other</h3>
  259.     <div class="container-fluid">
  260.       <div class="col-lg-2 col-md-3 col-sm-6">
  261.         <a href="examples/timeline/other/requirejs/requirejs_example.html"">
  262.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/requirejs/requirejs_example.png">
  263.           <div class="exampleTitle">require js</div>
  264.         </a>
  265.       </div>
  266. 

  267.       <div class="col-lg-2 col-md-3 col-sm-6">
  268.         <a href="examples/timeline/other/customTimeBars.html">
  269.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/customTimeBars.png">
  270.           <div class="exampleTitle">custom time bars</div>
  271.         </a>
  272.       </div>
  273. 

  274.       <div class="col-lg-2 col-md-3 col-sm-6">
  275.         <a href="examples/timeline/other/dataAttributes.html">
  276.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/dataAttributes.png">
  277.           <div class="exampleTitle">data attributes</div>
  278.         </a>
  279.       </div>
  280. 

  281.       <div class="col-lg-2 col-md-3 col-sm-6">
  282.         <a href="examples/timeline/other/dataAttributesAll.html">
  283.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/dataAttributesAll.png">
  284.           <div class="exampleTitle">data attributes all</div>
  285.         </a>
  286.       </div>
  287. 

  288.       <div class="col-lg-2 col-md-3 col-sm-6">
  289.         <a href="examples/timeline/other/groupsPerformance.html">
  290.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/groupsPerformance.png">
  291.           <div class="exampleTitle">groups performance</div>
  292.         </a>
  293.       </div>
  294. 

  295.       <div class="col-lg-2 col-md-3 col-sm-6">
  296.         <a href="examples/timeline/other/hidingPeriods.html">
  297.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/hidingPeriods.png">
  298.           <div class="exampleTitle">hiding periods</div>
  299.         </a>
  300.       </div>
  301. 

  302.       <div class="col-lg-2 col-md-3 col-sm-6">
  303.         <a href="examples/timeline/other/localization.html">
  304.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/localization.png">
  305.           <div class="exampleTitle">localization</div>
  306.         </a>
  307.       </div>
  308. 

  309.       <div class="col-lg-2 col-md-3 col-sm-6">
  310.         <a href="examples/timeline/other/performance.html">
  311.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/performance.png">
  312.           <div class="exampleTitle">performance</div>
  313.         </a>
  314.       </div>
  315. 

  316.       <div class="col-lg-2 col-md-3 col-sm-6">
  317.         <a href="examples/timeline/other/rtl.html">
  318.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/rtl.png">
  319.           <div class="exampleTitle">rtl</div>
  320.         </a>
  321.       </div>
  322. 

  323.       <div class="col-lg-2 col-md-3 col-sm-6">
  324.         <a href="examples/timeline/other/timezone.html">
  325.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/timezone.png">
  326.           <div class="exampleTitle">timezone</div>
  327.         </a>
  328.       </div>
  329. 

  330.       <div class="col-lg-2 col-md-3 col-sm-6">
  331.         <a href="examples/timeline/other/drag&drop.html">
  332.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/drag&drop.png">
  333.           <div class="exampleTitle">drag & drop</div>
  334.         </a>
  335.       </div>
  336. 

  337.       <div class="col-lg-2 col-md-3 col-sm-6">
  338.         <a href="examples/timeline/other/functionLabelFormats.html">
  339.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/functionLabelFormats.png">
  340.           <div class="exampleTitle">function label formats</div>
  341.         </a>
  342.       </div>
  343. 

  344.       <div class="col-lg-2 col-md-3 col-sm-6">
  345.         <a href="examples/timeline/other/horizontalScroll.html">
  346.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/horizontalScroll.png">
  347.           <div class="exampleTitle">horizontal scroll</div>
  348.         </a>
  349.       </div>
  350. 

  351.       <div class="col-lg-2 col-md-3 col-sm-6">
  352.         <a href="examples/timeline/other/usingReact.html">
  353.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/usingReact.png">
  354.           <div class="exampleTitle">using react</div>
  355.         </a>
  356.       </div>
  357. 

  358.       <div class="col-lg-2 col-md-3 col-sm-6">
  359.         <a href="examples/timeline/other/verticalScroll.html">
  360.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/verticalScroll.png">
  361.           <div class="exampleTitle">vertical sroll</div>
  362.         </a>
  363.       </div>
  364.     </div>
  365. 

  366.     <h3>styling</h3>
  367.     <div class="container-fluid">
  368.       <div class="col-lg-2 col-md-3 col-sm-6">
  369.         <a href="examples/timeline/styling/axisOrientation.html">
  370.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/axisOrientation.png">
  371.           <div class="exampleTitle">exis orientation</div>
  372.         </a>
  373.       </div>
  374. 

  375.       <div class="col-lg-2 col-md-3 col-sm-6">
  376.         <a href="examples/timeline/styling/customCss.html">
  377.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/customCss.png">
  378.           <div class="exampleTitle">custom css</div>
  379.         </a>
  380.       </div>
  381. 

  382.       <div class="col-lg-2 col-md-3 col-sm-6">
  383.         <a href="examples/timeline/styling/gridStyling.html">
  384.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/gridStyling.png">
  385.           <div class="exampleTitle">grid styling</div>
  386.         </a>
  387.       </div>
  388. 

  389.       <div class="col-lg-2 col-md-3 col-sm-6">
  390.         <a href="examples/timeline/styling/itemClassNames.html">
  391.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/itemClassNames.png">
  392.           <div class="exampleTitle">item class names</div>
  393.         </a>
  394.       </div>
  395. 

  396.       <div class="col-lg-2 col-md-3 col-sm-6">
  397.         <a href="examples/timeline/styling/itemTemplates.html">
  398.           <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/itemTemplates.png">
  399.           <div class="exampleTitle">item templates</div>
  400.         </a>
  401.       </div>
  402.     </div>
  403.   </body>
  404. </html>