Menu

Timeline

Timeline Demo

XMod Pro Module Kit - History Timeline With TimelineJS & XMP JSON Feed

As an example kit to show off the flexibility of XMod Pro templates when creating module items for DotNetNuke, we have put together an example using the popular JavaScript TimelineJS timeline slider VéritéCo
 
Module Description: This incredibly smooth, elegant timeline/history scrolling chart is described by the developer as "Beautifully crafted timelines that are easy, and intuitive to use." TimelineJS can pull in media from different sources. It has built in support for Twitter, Flickr, Google Maps, YouTube, Vimeo, Dailymotion, Wikipedia, SoundCloud and more media types in the future. Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON
 
TimelineJS Features:
  • Elegant timeline horizontal slider/time scale slider presentation
  • Headline, Subhead, Paragraph description
  • Image thumbnail
  • Can embed youTube, Vimeo video
  • Can embed Google Maps (or charts, or any other embed type content)
  • zoom in/out of timeline scale
  • NOT FLASH, this is all JavaScript : )
  • Can work with external JSON feeds (flickr, etc)

 
Uses: It can be used to show display any type of history or timeline narrative that is built from your JSON Feed. There is no fixed limit to the number of items in the history list, as the timeline will expand and organize events appropriately regardless of the grouping/legnth of timespan. As tips for great timelines, they recommend, "Pick stories [timelines] that have a strong chronological narrative. Include events that build up to major occurrences. Not just the major events."
 

TimelineJS

A timeline of DotNetNuke history displaying 27 records


XMod Pro Module Kits

XMod Pro Module Kits: Notes & Instructions

  • XMod Pro demos and XMod Pro Module Kits are free for everyone to use! We have developed them to help share popular items and to help train users in the features and functionality of XMod Pro for creating custom module solutions for DotNetNuke!
  • This kit utilizes code and files from VeriteCo's TimelineJS elegant timeline solution found at http://timeline.verite.co. The project is hosted on GitHub
  • To utilize this XMod Pro demo, simply download the Module Kit from the DNNDev Downloads section. Once you've downloaded the file, install it as you would any DNN module. Next, add the kit module to a page. Finally, click the module's "Finish Installation" button to complete the process. The result will be an XMod Pro module instance, configured to use the kits forms, templates, and feeds as needed.
  • There are tons of features and extra things that you can customize in code... for instance, for data formats, the timeline can take either a JSON feed (the default we're using), but also a Google Docs spreadsheet cvan be used! Just use this google docs spreadsheet template.
  • For demo purposes, initial templates are set to reference the sample images stored on the DNNDev site. When ready to use, follow instructions in the code and edit the code (and feed) files to reference your DotNetNuke instance
  • ALso, for demo purposes, the title timeline item (first element) is hard-coded within the XMP Feed. Make edits or remove from that location, all the while learning about XMP Feeds and how to setup a JSON feed!
  • Don't forget, after install, you'll also need to setup the admin module Template and Form for editing the timeline history items, Form/Template: Timeline_History_Items
  • This XMod Pro Module Kit features an XMP Template for layout, a timeline list as a JSON XMP Feed, and XMP Form with admin-only editor view.

Timeline Manager