На этом уроке мы создадим аудио-плеер из Impressionist UI от Владимира Кудинова. Мы будем использовать CSS3 для оформления плеера и "MediaElement.js" для создания функциональности. MediaElement.js - это HTML5 аудио и видео плеер, который также работает в старых браузерах, используя Flash и Silverlight, чтобы имитировать HTML5 MediaElement API.

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

Фотографии, используемые в этой статье, из Library of Congress Flickr set. Мелодию можно скачать из бесплатного архива  музыки - Free Music Archive.

Итак, давайте посмотрим как это сделать!

Возможно Вы уже видели impress.js, действительно отличную JavaScript-библиотеку для создания 3D-презентаций. jQuery плагин jmpress.js позволит Вам использовать эту библиотеку вместе с jQuery, с некоторыми дополнительными опциями. Мы хотим показать вам сегодня, как использовать этот замечательный плагин для создания слайд-шоу с 3D-эффектами.

Значки, используемые в демо от Artcore Illustration, и используются они по Creative Commons BY-NC-ND 3.0 license.

Итак, давайте начнем!

На этом уроке мы создадим календарь при помощи jQuery и CSS3, пример которого можно найти в Futurico UI Pro созданного Владимиром Кудиновым. Для «функциональности» мы будем использовать  jQuery и jQuery UI. Из JQuery UI мы будем использовать только скрипт "Datepicker". Так что вам не нужно загружать все компоненты, доступные в JQuery UI, и размер файла будет меньше.

Сегодня мы хотим показать вам, как создать горизонтальную компоновку контента из нескольких панелей. Идея состоит в том, чтобы сделать каждую панель с собственной прокруткой и анимацией содержания, в левой части окна будет меню, с помощью которого будет осуществляться навигация по контенту. Задача состоит в том, чтобы это работало с различными размерами окна, поэтому мы будем изменять панели с контентом, если экран не достаточно широк.