Timeline JS сервис для визуализации хронологических событий

Timeline JS сервис для визуализации хронологических событий

От автора: в данном уроке я хотел бы представить Вашему вниманию, очень функциональный сервис по созданию интерактивных временных шкал, на которых удобно и наглядно могут располагаться данные по различным событиям. То есть TimelineJS – очень удобный инструмент для визуализации какой-либо хронологии или последовательности событий.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

Официальный сайт сервиса Timeline JS располагается по адресу http://timeline.knightlab.com/.

На главной странице Вы сразу же можете увидеть презентацию возможностей и функционала временной шкалы.

Сервис Timeline JS, позволяет отобразить на сайте временную шакалу, состоящую из двух отдельных блоков. Первый блок – это непосредственно временная шкала с событиями, которые привязаны к конкретным датам. И второй блок – это слайдер, который отображает подробный контент каждого события. В качестве контента события можно использовать как обычный текст, так и различные медиа-материалы: видео, аудио, фото, документы и т.д.

Теперь на главной странице, кликаем по ссылке “Make Timeline” и нас перенаправляют на краткую инструкцию по работе с данным сервисом.

При этом, сразу же хотел бы отметить, что сервис Timeline работает с данными, которые добавлены в таблицу он-лайн документов от сервиса Google. Поэтому для начала необходимо создать данную таблицу, которая называется шаблоном для сервиса Timeline. Но с нуля, конечно же, таблицу мы создавать не будем, так как разработчики рекомендуют использовать уже готовый шаблон, который в последствии, будет отредактирован. В пункте первом инструкции присутствует ссылка, на шаблон разработчиков, который, кстати, используется для демо-презентации. Поэтому кликаем по данной ссылке и переходим на страницу готового шаблона.

При этом данный шаблон необходимо скопировать в собственную учетную запись сервиса Google, для этого используем кнопку “Использовать этот шаблон”. После нажатия на данную кнопку, готовый шаблон будет скопирован в Вашу учетную запись Google.

Далее данный шаблон необходимо опубликовать в интернете – для этого переходим в меню Файл, и нажимаем по ссылке “Опубликовать в интернете…”.

При этом, в выпадающем окошке копируем ссылку, на данный документ. Далее возвращаемся на страницу инструкции и в третьем пункте — вставляем в текстовую область скопированную ссылку.

Далее опускаемся к пункту 4 и в текстовой области копируем готовый код, который необходимо добавить на страницу Вашего сайта, на которой необходимо отобразить временную шкалу.

Полученный код я добавляю на тестовую HTML страницу:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset='utf-8'>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Тестовый однстраничный сайт</title>

</head>
<body>

<iframe src='//cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1dTRjC4Hg09gxrid2GRQaMxDsBXwen8zXofbtLNS_-vc&font=Default&lang=ru&initial_zoom=2&height=650' width='100%' height='650' frameborder='0'></iframe>

</body>
</html>

При этом на экране мы увидим следующее (в данном примере я уже заранее отредактировал шаблон):

Теперь хотел бы сказать несколько слов о данных, которые необходимо указывать в ячейках шаблона:

Ячейки A-D – время начала события. А – год, B – месяц, C – день, D – время.

Ячейки E-H – время окончания события. E – год, F – месяц, G – день, H – время.

Ячейка J – заголовок события.

Ячейка K – текстовое описание для события (произвольный текст – контент события).

Ячейка L – медиа-контент события. В качестве медиа-контента можно использовать: изображения или фото из различных фото-хостингов (Instagram, Flickr); видео – из видео-хостингов Vimeo, DailyMotion, Vine, и YouTube; статьи из Википедии и много другое. Полный список поддерживаемых медиа-материалов приведен по адресу: http://timeline.knightlab.com/docs/media-types.html

Ячейка M – автор события или ссылка на страницу автора события (при добавлении ссылки, необходимо использовать HTML тег <a>).

Ячейка N – заголовок или краткое описание, которое отображается под медиа-контентом (так же допускается использование ссылок).

Ячейка О – путь к миниатюре изображения используемого в кратком описании события на временной шкале.

Ячейка Р – добавляя в данную ячейку значение title — Вы назначаете определенное событие — как бы стартовой страницей слайдера, при этом данное событие отображается при загрузке страницы и исключается из временной шкалы.

Ячейка Q – используя данную ячейку – Вы можете разбить события по отдельным группам.

Ячейка R – фон для каждого слайда событий. В качестве фона Вы вправе указывать цвет, либо ссылку на изображение, которое будет использоваться в качестве фона.

Теперь осталось только добавить данные по интересующим событиям в шаблон и обновить страницу тестового сайта.

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree