Фотогалерея при помощи Panoramio API

Опубликовано Опубликовано в рубрике jQuery, Panoramio API, PHP

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

Не секрет, что сейчас фотохостинг Panoramio предоставляет свой API для простого и быстрого встраивания выборок фотографий на свой сайт. Вывод можно организовывать как при помощи iframe, так и при помощи JavaScript. И всё бы было хорошо, если бы не один противный факт — при клике на изображение открывается новая вкладка с сайтом Panoramio и полноразмерным вариантом фотографии.

Я поставил перед собой задачу — выводить фотографии в свою фотогалерею с маджонгом и гейшами лайтбоксом и тайтлами. То есть, пользователь при клике по миниатюре фотографии не уходит с ресурса, а получает красивое модальное окно с увеличенной фотографией.

Изначально неправильный путь лежит в попытках подружить готовые решения в виде iframe или JavaScript со своим ресурсом. Поэтому код будем писать сами. Благо, разработчики API оставили возможность получить выборку в виде json-строки в ответ на REST-запрос.

Почитав документацию по API и немного погуглив, пробуем составить запрос. Допустим, на входе у нас есть координаты города Москва. Тогда мы можем искать все фотографии с тегом «Москва» в квадрате примерно 100 на 100 километров. Почему 100 на 100? В очень приблизительных рассчетах 100 километров соответствуют одному градусы широты или долготы. Посчитаем:

$minx = 37.617633 - 1;//координата x левого нижнего угла
$miny = 55.755786 - 1;//координата y левого нижнего угла
$maxx = 37.617633 + 1;//координата x правого верхнего угла
$maxy = 55.755786 + 1;//координата y правого верхнего угла

Теперь пишем запрос:

http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=public&from=0&to=27&minx='.$minx.'&miny='.$miny.'&maxx='.$maxx.'&maxy='.$maxy.'&tag=Москва&size=square&callback=?

В запросе все просто — подставляем координаты в соответствующие get-значения, задаём тэг поиска в get-переменную tag, указываем размер превьюшек в size.

Далее нужно отослать запрос. Из него нужно убрать символы в начале, а после — первый и последний символы строки для того, чтобы php правильно обработал json-строку встроенной функцией.

$request = file_get_contents($req_url);
$request = str_replace ("/**/", "", $request);
$request = substr($request,1,-1);

Теперь можем обработать полученную строку. В этом нам поможет функция json_decode(), которая декодирует json-строку в массив. ВНИМАНИЕ: на сервере должен быть включен php-модуль json!

$json = json_decode($request, true);

Значение true позволяет декодировать строку в ассоциативный массив.
Первое значение — это количество найденных фотографий. Основная информация о фотографиях лежит во вложенном массиве photos. Информация здесь упорядочена следующим образом

{
"upload_date":"24 March 2011",
"owner_name":"@polytropos",
"photo_id":49940469,
"longitude":-77.918760000000006,
"height":60,
"width":60,
"photo_title":"(messi10) Oldtimer in Camag\u00fcey [280\u00b0] ",
"latitude":21.382149999999999,
"owner_url":"http://www.panoramio.com/user/162722",
"photo_url":"http://www.panoramio.com/photo/49940469",
"photo_file_url":"http://mw2.google.com/mw-panoramio/photos/square/49940469.jpg",
"owner_id":162722
}

По-порядку:

  1. upload_date — дата загрузки фотографии
  2. owner_name — имя пользователя в системе Panoramio
  3. photo_id — id снимка
  4. longitude — долгота места, к которому привязана фотография
  5. latitude — широта места, к которому привязана фотография
  6. width и height — разрешение миниатюры
  7. photo_title — название фотографии
  8. owner_url — ссылка на профиль владельца
  9. photo_url — ссылка на страницу фотографии в системе Panoramio
  10. photo_file_url — ссылка на миниатюру
  11. owner_id — id владельца фотографии в системе Panoramio

Обладая такой бесценной информацией можно сформировать вывод нашей фотогалереи. Кстати, в системе Panoramio все ссылки на фотографии псевдостатические. Таким образом, ссылка на фотографию среднего размера будет выглядеть вот так

http://mw2.google.com/mw-panoramio/photos/medium/.jpg

Учитывая уже подключенный скрипт lightbox, полученную информацию мы можем красиво скомпоновать!


		
			
		
	


Права на фотографии принадлежат их авторам или владельцам

Теперь полученные фотографии в количестве 28 штук (REST-запрос возвращает информацию именно на такое количество снимков — обратите внимание на параметры from=0 и to=27: их можно менять, но максимально запрос возвращает 100 фотографий) красиво выводятся в div. При нажатии на миниатюру, появляется lightbox, в котором находится полноразмерное изображение, снизу показывается имя автора и название фотографии. Все выводимые фотографии объединены в фотогалерею, т.е. необязательно закрывать модельное окно, чтобы посмотреть другие фото.

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

За сим всё!

Безошибочного Вам кода!

Фотогалерея при помощи Panoramio API: 3 комментария

  1. Спасибо за информацию!
    В моей программе требуется получить фотографию из указанного места, с указанной погодой(как раз для этого есть теги: cloud, rain, lightning, snow…).
    Так вот в Вашем запросе tag=Москва присутствует, но не работает. Просто откройте любой photo_url в Вашем json-ответе, и на странице в информации о тегах вы Москву не увидете. Конечно, учитывая указание координат в запросе, не важно, что тег с названием города не обрабатывается. Но как быть в моей ситуации? Возможно, какой-то другой формат запроса?

    Заранее спасибо за ответ.

  2. Возможно, есть какой-либо способ, получив указанным Вами образом, ссылки на фото, уже среди них проверять тэги?

    1. Во-первых, не стоит путать информацию с различных API (привет принципу инкапсуляции!). Для того, чтобы получать и фотографии, и погоду, необходимо использовать Panoramio API и Google Weather API. Про GW API я уже писал здесь же.

      Во-вторых, да, поиск по русскому тэгу работать уже не хочет, однако если в параметр tag вбить, скажем, sand, то тогда будут искаться фотки с соответствующими метками.

      В принципе, если есть координаты места, то проблем с гео-API быть вообще не должно.

      Теги к фоткам приходят в общем XML. Хотя, при использовании двух разных специализированных API, надобность в этом отпадает.

Добавить комментарий для Artem Отменить ответ

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