1. INDEX
  2. INTRODUCTION
  3. HTML Structure
  4. JAVASCRIPT
  5. CSS
  6. PSD Files
  7. Useful Links
  8. Sources and Credits

Timeline Slider

jQuery Plugin

Thank you for purchasing this file. If you have any questions that are beyond the scope of this help file, please contact me through my Envato profile page.

INTRODUCTION

Timeline Slider is the definitive plugin to build your history timelines. Its main configuration can be easily customized due to its extended config options, directly from the plugin call settings. Also more configurations can be edited through the CSS file. It comes with 2 skins, Dark, Light, responsiveness, flat design option, audio player and many new features on V3.0 (read below).

3 built-in Themes

IMPORTANT NOTE - v3.0 - 7/4/2016 [ MAJOR UPDATE - RESPONSIVE & PLUGIN REBUILT ]

A major update has been made on v3. A complete rebuilt has been done on the code and file structure. The main change is related with built-in responsive behaviour and plugin options configuration. Main changes:

- New HTML markup, simpler and clear.
- New extended options to make easier the plugin configuration.
- Responsive and fullwidth layout.
- Built-in themes and styling, directly through plugin settings.
- New features with built-in settings.
- JS calls reduced to unique lightweight vendors.js file.
- jQuery updated to v2.2.2.
- New preview design - PSD included.
- Help Docs updated.

Useful fullscreen Lightbox [Prettyphoto] - New since v2.0 Custom flat theme!

The script includes the prettyPhoto add-on, which allows multiple possibilities. Check the provided samples to get an idea of possible usages, such multigallery with unlimited items, videos (Quicktime, Flv, Youtube, Vimeo). For more info check the reference sections.

Lightbox - PrettyPhoto included

HTML Structure

A major rebuild has been made on v3, simplifying the HTML Markup. Now you only need to load the jquery.timeline.css on head, and 2 files at the end of the html, the jQuery library (v2.2.2) and the main plugin JS: jquery.timeline.js Inside a script tag you will find the sample plugin call on the source provided. You can call the plugin directly or include config settings that will overwrite the default ones inside the JS file. Again, checking the samples provided will be the easiest way to start your customization.

[TIP]: How to change the main font

The template uses Google Fonts system. This means you don't need to manage your own font files, all fonts will be read from Google server. Just refer inside jquery.timeline.css (imports section) your desired font (default is: Roboto Condensed) and then go replace "Roboto Condensed" string with your font ID. For more info and fonts check the following URL:
https://developers.google.com/webfonts/

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,500,700);

HTML Structure

Inside the body, there is DIV with the .timeline-wrapper class. To paste inside your project, you would just need to copy/paste the whole div. You can change the ID, but not the class (this is important). If you change the ID, remember to also change it on your plugin call, inside script tag, at the end of the markup. 

 ...


VIEWPORT IMAGES DIV

The following DIV displays the Images that will appear on top band. You can use jpg/gif/png and any width. The overall width of the viewport area will be setup but the plugin summing up all the width from your images, once loaded. The sample provided uses transparent PNG images, which is a nice way to create kind of deep effect over the background while scrolling. Be creative! (note that you can also place html content here, even complex elements as video players, just place it in the right place and create your custom css for them).

[TIP] You will a sample of using one of the images to call a video on lightbox. You can use this configuration to call external links, open galleries or open emails, for example.

[TIP] Better split images for site speed, but you can use just one full image for all.



SCROLLBAR + MARKS DIV

The following DIV displays the small marks that appears on the scroll area. Each mark has data-xpos attribute, the _x position, considering 0 the left side of the timeline container, which is setup on percent basis.
Also, there is another attribute (data-label) that will be displayed on rollover. You can use plain number (dates) or more elaborate labels.


THE CONTENT / MILESTONES DIV

The following DIV displays all the Milestones text items.
This is maybe the most tricky part of the code. Content is organized by columns. Each column content can be edited up to your needs, considering your available height in content area. You can use the prettyPhoto plugin for extended content using hidden divs (please, refer to the provided samples to see how it works). Almost any kind of media can be displayed inside the columns, so be creative!. One important thing is the width of each column. You will find kind of short codes using the different width classes which refers as "c100", "c125", "c150", "c200" and so on, where the number refers to the value in pixels. You have built-in classes from 100px to 400px. For more values you will need to add them in the style.css file. 

								
								

									

										1910-1929: ART NOUVEAU
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate pariatur. 
									

								

								
								
								

									

										1935
										Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Duis aute irure dolor in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

[TIP] Any link tagged with "video_bt" class, will automatically pause the global music.

[TIP] If you have large contents for one column, it's better to split it into lightbox. Check samples provided to see how to get it done.



THE AUDIO PLAYER

The Audio player is created on the flow by the plugin. Check JAVASCRIPT sections to enable/disable it. In case you are migrating from earlier versions, since v3.0 there is no need to have a DIV with the audio tag inside the HTML Markup.



JavaScript

This plugin imports 3 Javascript files.

  1. jquery-2.2.2.min.js
  2. vendors.js
  3. jquery.timeline.js

Except the jquery.timeline.js file, the rest of classes copyrights belongs to their respective authors.
Please, check each class license and terms conditions on the author websites (check on Sources & Credits for more info)
Also, note that on vendors.js file (all the scripts required by the plugin, compiled), some changes and additions have been added.


Let's explain it a bit...

Inside the jquery.timeline.js you will find all the functions that controls the work around of the plugin. Each function is properly commented in the .js file. The whole js is properly formatted as a jQuery plugin, to avoid conflicts with other frameworks. Note: editing the jquery plugin code requires some knowledge of javascript and jQuery coding; do not change the .js file unless you know what you are doing. In most of the cases, the plugin settings (available through direct call on HTML script tag) will be enough to customize the plugin to match your project needs.

PLUGIN SETTINGS

The settings have been fully reworked on major v3.0 update. Each entry is properly commented in the code. The ones below are the default ones, but all of them can be overwritten once you call the plugin on the HTML file. Check the samples provided on how to change the theme (light & dark), the styling (new flat style included), use fullwidth layout or enable/diseable the built-in audio player. 


			// SIZING OPTIONS
			timelineWidth: 960,					// TIMELINE GLOBAL WIDTH, value in pixels OR 'auto' (WITH QUOTES) FOR FULLWIDTH
			timelineHeight: 500,				// TIMELINE GLOBAL HEIGHT, value in pixels
			upperAreaHeight: 265,				// UPPER AREA (IMAGES) HEIGHT, value in pixels
			lowerAreaHeight: 215,				// LOWER AREA (MILESTONES) HEIGHT, value in pixels
			draggerHeight: 21,					// DRAGGER (SCROLLBAR) HEIGHT, value in pixels

			// AUDIO OPTIONS
			audioPlayer: true,					// AUDIO PLAYER ACTIVE OR NOT, true OR false
			audioAutoPlay: true,				// MUSIC AUTOPLAY ON INIT, true OR false
			audioLoop: true,					// MUSIC RESTARTS AT THE END, true OR false
			audioFilePath: 'mp3/music.mp3',		// MUSIC FILE PATH

			// STYLING OPTIONS
			responsive: true,					// RESPONSIVE BEHAVIOUR, true OR false
			marksOnMobile: true,				// KEEP MARKS ON MOBILE (BELOW 768px), true OR false
			version: 'dark',					// LIGHT OR DARK THEME, 'light' OR 'dark'
			designStyle: 'default',				// DEFAULT OR FLAT DESIGN, 'default' OR 'flat'
			accentColor: '#299ec4',				// MAIN COLOR FOR TITLES AND EFFECTS, #hexadecimal
			timelineBorderWidth: 4,				// BORDER FOR GLOBAL CONTAINER, in pixels
			timelineBorderColor: '#ffffff',		// BORDER COLOR, #hexadecimal
			shadow: true						// DISPLAY SHADOW BELOW THE TIMELINE, true OR false

[TIP] A common usage could be turning the fixed width into fullwidth layout. To do that, just change the option timelineWidth to 'auto'. It's important that you use the quotes, or the plugin won't be able to determine the proper width you are desiring. Also note that setting up the width to auto, will make the timeline always responsive, no matter is responsive option is setup to false.

[TIP] Responsive is a huge update feature on v3.0. Anyway, it can be disable, using the responsive option and setting it up to false (please, consider the above info).

[TIP] The dragger width is setup directly from the img width. Height is setup with a config options, as it will affect to the size of the scrollbar area, also. Note that is you set a different height than the default one, you will want to adapt the dragger img to match that height, too.

[TIP] For the audio player, you can use MP3, OGG or WAV files. Consider the file size, as it will be downloaded fully once the http request has been done.

CSS

Apart from the main configuration parameters of the timeline script, you can also modify some aspects of the overall design by modifying the css/jquery.timeline.css file. Note that in the provided samples all aspects have been configured in the plugin settings directly on each HTML file. The main CSS is properly labeled and commented.

The css includes some styles for the demo, like a top margin and color backgrounds. Normally, you won't need these styles once on your environment. Those styles are titled with GLOBAL - JUST FOR DEMO.



How to change the main font

The template uses Google Fonts system. This means you don't need to manage your own font files, all fonts will be read from Google server. Just refer inside jquery.timeline.css (imports section) your desired font (default is: Roboto Condensed) and then go replace "Roboto Condensed" string with your font ID. For more info and fonts check the following URL:
https://developers.google.com/webfonts/

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,500,700);

Main Elements

.timeline_wrapper is the main wrapper - container for the whole timeline.
.timeline .viewport references are linked with the main holder for top images band.
.timeline .milestones references are linked with the main holder for bottom milestones content.
.timeline .scrollbar references are linked with the main holder for scrollbar element.

	/* -- Main Wrapper -- */
	.timeline-wrapper {
		position: relative;
		width: 0;
		height: 0;
		font-family: 'Roboto Condensed', sans-serif;
		background-color: #e9e9e9;
		overflow: hidden;
	}

	/* -- Viewport -- */
	.timeline .viewport {
		overflow: hidden;
		position: relative;
		background: url(../images/background.jpg) no-repeat 0 0;
	}

	/* -- Milestones -- */
	.timeline .milestones {
		position: relative;
		overflow: hidden;
	}

		.timeline .milestones .content {
			position: relative;
		}

Other useful entries in the CSS, are the following: 

	/* -- Css that controls the milestones columns main attributes -- */
	.timeline .column {
		margin: 14px 0 0 50px;
		padding-left: 10px;
		display: inline-block;
		vertical-align: top;
		border-left: 1px solid #ccc;
	}

	/* -- Css that controls the milestones columns width -- */
	/* -- Create new ones if needed -- */
	.timeline .c100 { width: 100px; }
	.timeline .c125 { width: 125px; }
	.timeline .c150 { width: 150px; }
	.timeline .c175 { width: 175px; }
	.timeline .c200 { width: 200px; }
	.timeline .c225 { width: 225px; }
	.timeline .c250 { width: 250px; }
	.timeline .c275 { width: 275px; }
	.timeline .c300 { width: 300px; }
	.timeline .c325 { width: 325px; }
	.timeline .c350 { width: 350px; }
	.timeline .c375 { width: 375px; }
	.timeline .c400 { width: 400px; }


	/* -- Css that controls the milestones titles and text format -- */
	.timeline .date {
		font-size: 16px;
		line-height: 17px;
		font-weight: 500;
		color: #0096ff;
	}

	.timeline .txt {
		margin-top: 8px;
		font-size: 13px;
		line-height: 16px;
		font-weight: 300;
		color: #565656;
	}

		.dark .timeline .txt {
			color: #ffffff;
		}


At the end of the CSS file you will find some external plugins (vendors) styling, like SimplePlayer (audio), PrettyPhoto or Tipsy (tooltip). Style them up to your needs.

PSD Files

This file includes several psds with the main design elements of the plugin. All are full layered and can
be easily edited to generate your own themes / skins. If you create a nice new theme and want to share it,
i'll be glad to heard about you! ;)

2 built-in Skins

Images band

The PSD files are located inside /Psds folder in the original source pack.

Sources and Credits

The file uses some open source files, here are the project / authors urls. Please refer to them in case you have doubts regarding licenses or copyrights limitations while using this plugin.


About the images
The online samples images belongs to their respective owners and are only used for demo purposes.
The images included in this source pack have been downscaled and pixelated.


Once again, thank you so much for purchasing this plugin.
If you have a more general question relating to this file, dont' hesitate to contact me through my profile form.

pezflash