CSS Media Timeline

[TS-VCSC-Icon-Title title=”Media Timeline Features” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RmVhdHVyZXM=”]

The “TS CSS (Media) Timeline” element allows you to easily create beautiful and interactive timelines. The timeline can be shown in both directions and provides an optional sorting feature as well. Each timeline section provides an option for embedding a “featured media” element, which can be an image, basic slider of multiple images or a video from YouTube, Vimeo or DailyMotion. All featured media elements can optionally be shown in a lightbox.

[TS_VCSC_Info_Notice presets=”preset_notice_info” panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle” font_title_family=”Default:regular” font_content_family=”Default:regular”]

This element replaces the former element “TS Isotope Timeline”, which has been officially deprecated with release of v3.1.0 of the add-on.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″][TS_VCSC_Fancy_List list_type=”image” marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png”]

  • One dual-column and three one-column layouts
  • Content for each timeline section is provided via custom post type
  • Sorting option (up/down) with animations
  • Filter option by section categories or tags
  • Featured media for each segment (image, basic slider, YouTube, Vimeo or DailyMotion video)
  • All featured media items can be shown in optional lightbox
  • Segments can be made full width (using both columns) when set as featured event
  • Use of “breaker segments” to highlight important changes or periods
  • Fully responsive with automatic switch to one out of three one-column layouts via custom breakpoint setting
  • Only CSS and some lightweight custom JS code used for timeline
  • Unlike it’s deprecated predecessor element “TS Isotope Timeline“, this element does not rely on Isotope anymore and also allows for multiple timelines on the same page

[/TS_VCSC_Fancy_List]

[TS_VCSC_Timeline_CSS_Container timeline_filter_allow=”true” timeline_title=”The Early Years of the Automobile Development” timeline_start=”Start” timeline_end=”End” timeline_description=”QSUyMHNob3J0JTIwYW5kJTIwaW5jb21wbGV0ZSUyMHN1bW1hcnklMjBvZiUyMHRoZSUyMGRldmVsb3BtZW50JTIwb2YlMjBhdXRvbW9iaWxlcyUyQyUyMHN0YXJ0aW5nJTIwd2l0aCUyMHRoZSUyMGZpcnN0JTIwc3RlYW0lMjBwb3dlcmVkJTIwdmVoaWNsZXMlMjB0byUyMHRoZSUyMGZpcnN0JTIwYWN0dWFsJTIwYXV0b21vYmlsZXMu” el_file=””][TS_VCSC_Timeline_CSS_Section section=”19028″ custompost_name=”Break: 1700 – 1799″][TS_VCSC_Timeline_CSS_Section section=”19031″ custompost_name=”First Self-Propelled Vehicle”][TS_VCSC_Timeline_CSS_Section section=”19029″ custompost_name=”Break: 1800 – 1899″][TS_VCSC_Timeline_CSS_Section section=”19035″ custompost_name=”Britain’s Improvement to the Steam Power Engine”][TS_VCSC_Timeline_CSS_Section section=”19036″ custompost_name=”More Engine Improvements”][TS_VCSC_Timeline_CSS_Section section=”19037″ custompost_name=”First Coal-Gas Engine”][TS_VCSC_Timeline_CSS_Section section=”19039″ custompost_name=”First Official Speed Limit” section_icon=”ts-awesome-dashboard”][TS_VCSC_Timeline_CSS_Section section=”19040″ custompost_name=”First Four-Stroke Engine”][TS_VCSC_Timeline_CSS_Section section=”19041″ custompost_name=”First Real Long-Distance Drive”][TS_VCSC_Timeline_CSS_Section section=”19042″ custompost_name=”First Car Dealership”][TS_VCSC_Timeline_CSS_Section section=”19043″ custompost_name=”Cylinders Were Made”][TS_VCSC_Timeline_CSS_Section section=”19030″ custompost_name=”Break: 1900 – 1999″][TS_VCSC_Timeline_CSS_Section section=”19046″ custompost_name=”Ford Model T”][TS_VCSC_Timeline_CSS_Section section=”19045″ custompost_name=”Charles Kettering”][TS_VCSC_Timeline_CSS_Section section=”19047″ custompost_name=”First Assembly Line”][/TS_VCSC_Timeline_CSS_Container]