Многоуровневая фото-карта для сайта на jQuery
Различные социальные сети заполонили нашу жизнь, все дальше становится тяжелее представить жизнь без них. Счастливчиками можно назвать тех, кого не поглотила интернет-паутина, ведь у них появляется сколько свободного времени. Люди делятся интересными записями и фото с друзьями, с недавнего времени вконтакте и фейсбуке появилась весьма интересная функция, а именно привязка изображений к картам, то есть фото пользователей автоматически отображаются на карте. Тем самым давая понять их местонахождение.
В данном уроке мы рассмотрим как создать такую интерактивную многоуровневою фото-карту с помощью jQuery и некоторых дополнительных плагинов. Мы используем карты Google maps, с левой стороны будет показана карта на которой будут выведены изображение на карте, при нажатии на них, мы получаем галерею в правой части контейнера с возможностью дальнейшего просмотра изображений. Кроме этого присутствует режим полноэкранного просмотра изображений.
Изображения, используемые в демо принадлежат Davidd. Они распространяется на условиях лицензии Attribution 2,0 Generic (CC BY 2.0).
Как это работает?
Места для изображений сохраняются в album.xml файл, который имеет следующую структуру:
1 2 3 4 5 6 7 |
<album> <name>Таиланд 2013</name> <description>Небольшое описание</description> <places> ... </places> </album> |
Далее все достаточно просто, мы будем будем указывать информацию по каждому месту с его наименованием и место нахождения в координатах, и все отдельные фотографии:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<place> <name>Bangkok</name> <location> <lat>13.696693336737654</lat> <lng>100.57159423828125</lng> </location> <photos> <photo> <thumb>photos/Bangkok/thumbs/1.jpg</thumb> <source>photos/Bangkok/1.jpg</source> <description>Небольшое описание</description> <location> <lat>13.710035342476681</lat> <lng>100.52043914794922</lng> </location> </photo> <photo> ... </photo> </photos> </place> |
Обратите внимание, что мы используем некоторые PHP здесь для загрузки и извлечения данных XML.
Изначально карту со всеми местами показано на рисунке: В нашем примере это Бангкока, Пхукета и Мелик. В баре под карту и область предварительного просмотра помещено название и описание всего альбома.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Интересно:
Print article | Опубликовал admin 12.02.2013 в 21:40, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
-
Дамир