Многоуровневая фото-карта для сайта на jQuery

Различные социальные сети заполонили нашу жизнь, все дальше становится тяжелее представить жизнь без них. Счастливчиками можно назвать тех, кого не поглотила интернет-паутина, ведь у них появляется сколько свободного времени. Люди делятся интересными записями и фото с друзьями, с недавнего времени вконтакте и фейсбуке появилась весьма интересная функция, а именно привязка изображений к картам, то есть фото пользователей автоматически отображаются на карте. Тем самым давая понять их местонахождение.

В данном уроке мы рассмотрим как создать такую интерактивную многоуровневою фото-карту с помощью jQuery и некоторых дополнительных плагинов. Мы используем карты Google maps, с левой стороны будет показана карта на которой будут выведены изображение на карте, при нажатии на них, мы получаем галерею в правой части контейнера с возможностью дальнейшего просмотра изображений. Кроме этого присутствует режим полноэкранного просмотра изображений.

Изображения, используемые в демо принадлежат Davidd. Они распространяется на условиях лицензии Attribution 2,0 Generic (CC BY 2.0).

Как это работает?

Места для изображений сохраняются в album.xml файл, который имеет следующую структуру:

Далее все достаточно просто, мы будем будем указывать информацию по каждому месту с его наименованием и место нахождения в координатах, и все отдельные фотографии:

Обратите внимание, что мы используем некоторые PHP здесь для загрузки и извлечения данных XML.

Изначально карту со всеми местами показано на рисунке: В нашем примере это Бангкока, Пхукета и Мелик. В баре под карту и область предварительного просмотра помещено название и описание всего альбома.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.