En cours

Interactive Javascript Timeline

Attached is a mockup design of the presentation piece we are looking to create. I will be able to prepare a XML dataset to pass to the JavaScript/html5canvas for it to parse and display. I'm leaning towards JavaScript for current compatibility reasons, but i am open to html5canvas development.

This project is JUST for the timeline piece and not the design of the website.

The dots represent chronological media that needs to be place on the line according to the XML dataset. The timeline will be given a start date and end date and the dots representing media (also with assigned dates in between the start and end dates) should be auto adjusted to fill the span of the line.

There a few interactions that we would like it to have, such as the box on the timeline bar should be able to slide left and right. As it slides the magnified line below should slide showing a magnification of what is under the preview box which will slide in/out of view respectively. Likewise a user can slide the magnified line itself left and right and the preview box on the timeline will adjust accordingly. The XML dataset will contain all the specific information for each media element, including the location of the thumbnail image.

Each piece of media needs an overlay of some sort to easily identify what type of media it is. (ie., image, video, document, audio, etc)

The loading of the media line should be optimized so that the items in view load first and then the the ones out of view afterwards OR an ajax method of only loading media images as they slide into view would also be acceptable (like google maps).

When a media image is hovered over, (I would like to consult with you on this)... Currently the mockup shows a details balloon displaying a summary about that media. The other idea is to have a larger box fade in over the timeline which will give more room and may use the space better. The data will be available via the xml dataset. Let's talk about this a bit more.

When a 'media' is clicked on, it should fire a line of javascript that will open up a shadow box that we will create. This javascript code will be passed in via the xml dataset so that it will be flexible for future changes and needs.

The background should be skinnable, the location of the background image will also be passed in by the XML dataset. We will be able to provide the current PSDs for the the one in the mockup.

That's about it. Please contact me with any questions you may have to be able to bid on this project.

Compétences : AJAX, Conception graphique , HTML5, Javascript, XML

Voir plus : javascript timeline, interactive javascript timeline, interactive timeline xml, timeline xml javascript, javascript timeline design, timeline interactive xml, interactive timeline javascript, video presentation background, room summary, line presentation, media room design, javascript development, interactions, create website javascript, consult website development, better javascript, interactive timeline ajax, timeline video interactive ajax, javascript xml timeline, timeline javascript project, javascript timeline xml, timeline javascript xml, timeline design, data design interactive, maps line

Concernant l'employeur :
( 1 commentaire ) Orem, United States

N° du projet : #1038659

Décerné à :

charlietfl

US based javascript specialist

400 $ USD en 6 jours
(41 Commentaires)
5.8

6 freelance ont fait une offre moyenne de 433 $ pour ce travail

codeguru786

Please check INBOX, Thanks

300 $ USD en 6 jours
(197 Commentaires)
8.0
stolho

Ready to start! Please read PM for more details!

500 $ USD en 3 jours
(43 Commentaires)
5.8
kamils

Hello. Please, check PM. Thank you.

500 $ USD en 7 jours
(5 Commentaires)
4.5
eddie09

Javascript Expert here boss. No upfront payment is required, we provide 100% satisfaction guarantee. Thanks

450 $ USD en 10 jours
(7 Commentaires)
4.5
nilogram

Hello, I am an expert creating custom ajax modules and plugins, and am very interested in providing my expertise for this project. Please pm me to further discuss how best to develop this project.

450 $ USD en 3 jours
(0 Commentaires)
0.0