Пользователь
0,0
рейтинг
18 июля 2012 в 23:28

Разработка → Фоткер — комфортный просмотр Яндекс.Фоток

Я — фотолюбитель и я очень люблю Яндекс.Фотки. Они служат мне одновременно и витриной моих снимков, и памятью о поездках, и одним из бэкапов. Но в случае, когда я хочу дать ссылку на просмотр какого-то альбома, мне становится бесконечно стыдно.

Судите сами, на мониторе в 23 дюйма фотография занимает… чуть меньше восьми:



Можно выбрать другой размер изображения и тогда фотография вырастает аж до 12:



При этом она уже не влазит на мониторы меньше 23", а в нагрузку нам остается куча мусора вокруг кадра, полная перезагрузка страницы при каждом переходе, отсутствие предзагрузки следующей фотографии и ужасный устаревший интерфейс.

Нет, мне так не нравится и я так не хочу! Я хочу, чтобы было красиво, удобно, быстро и еще чтобы на планшете можно было пальчиком перелистывать!

Сказано — сделано! Задумка была воплощена в жизнь вдвоем с братом WildWolf на ДОУ Хакатон в Харькове. Там мы написали и презентовали Фоткер, после чего его дизайн был создан нашим товарищем Антоном:



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

Так выглядит просмотр всех альбомов пользователя:



А так — просмотр фотографий в альбоме:



При нажатии на фотографию она разворачивается на все окно браузера и дальше можно листать их вперед-назад, влево-вправо, туда-сюда. Максимум акцента на ваших фотографиях и минумум отвлекающих элементов!

Технически это реализовано следующим образом — Фоткер отдает браузеру JavaScript, который с клиента делает запрос к API Яндекс.Фоток, получает JSON, разбирает его и формирует страницу. Все фотографии, маленькие и большие, грузятся напрямую с серверов Яндекс.Фоток.

А в глубине всего этого прячутся: PHP, Smarty, jQuery, Galleria и желание сделать мир несколько лучше. Ведь весь исходный код Фоткера доступен на Github.

Фоткер — делает Яндекс.Фотки еще чудеснее!
Олег @Aldekein
карма
66,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (79)

  • +5
    Интересный проект! Спасибо!
    Можно ещё к нему добавить поиск по тегам и ключевым словам — и будет вообще шик =)
    • +5
      И ещё замечание: если фотка не HD, не надо её растягивать, смотрится плохо.
      • +1
        да надо центрировать просто в лайтбоксе
  • –4
    Огонь, просто огонь!
  • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      Достаточно попадать в правую или левую часть экрана, относительно центра фотографии — не нужно целиться в какое-то определенное место =)
  • 0
    Ох, если бы это еще можно было встраивать в блог, например. Потому что яндекс выдает альбомы в неудобоваримом виде совершенно. Приходится выдирать по одной, вручную формировать HTML…
    • 0
      а что яндекс может выдать кроме собственно урлов на выбранные фотки? это я о «неудобоваримом виде».
    • +1
      photo2blog.ru вас спасет :)
  • 0
    Огромное человеческое спасибо!
  • 0
    Это вы? Пламенный привет участникам ДОУ Хакатонов))
  • +2
    Два замечания:
    1. На последнем скриншоте видно, что ваш метод масштабирования не подходит для панорам — панорама в предпоследней колонке стала микроскопической полоской.
    2. Если ввести неверное имя пользователя, то после ожидания появляется сообщение об ошибке, без какой-либо возможности исправить что-либо или куда-либо перейти.
    • 0
      2.1. Пустое имя тоже катит.
      • 0
        К сожалению в связи со спецификой работы JSONP ошибка 404, которая выдается Яндексом в этом случае, не отлавливается стандартными средствами jQuery. Было решено не тратить на это времени — это совсем уж не критический баг.
        • 0
          Так может просто фильтровать входные данные? Не начинать загрузку если пользователь ничего не ввёл?
  • 0
    А можно генерировать изображения чтобы можно было вставлять ссылки на форумах сразу на галерею через сие чудо?
    • 0
      *генерировать ссылку на изображения
    • 0
      Жаль запароленные альбомы смотреть нельзя(
      • 0
        и выбирать размер изображения?
    • 0
      Ну да, копируете ссылку из адресной строки при просмотре пользователя/альбома/фотографии — это она и есть.
      • 0
        не, я имею ввиду функционал «получить ссылку на изображение» в Я.Фотках. Т.е. выделяем все изображения в альбоме, и получаем простынь из тумбочек, а при клике по тумбочке отправляемся на полноэкранный просмотр.

        ЗЫ Хотя можно наверное UserJS написать чтобы редиректил, или ссылки подменял.
        • +1
          «простынь из тумбочек»! Я минуту думал об этом феномене)))
          Ок, добавим в wishlist.
  • +1
    Молодцы! Яндексу действительно стоило бы хотя бы немного подтянуть юзабельность своего сервиса.
    Давно собираюсь бекапиться на я.фотки, но не нашёл способа автоматизировать этот процесс, вы вручную всё заливаете? Вот бы залить одним махом весь фото-архив…
    • 0
      Есть вот такая вот программка zenden.ws/imageuploader_ru умеет заливать на многие сервисы)
      • 0
        Благодарю, вечером потестю :)
      • 0
        У меня она уже полгода не работает с половиной сервисов, я думал поддержка прекратилась.
        • 0
          А я только для яндекс фоток использую)
        • 0
          недавно даже новая версия появилась, но было бы хоро если бы ядиск научился фотки синхронизировать в я фотки
          • 0
            *хорошо (сенсорные клавы это ад )
      • 0
        Вечер наступил через несколько месяцев :)
        Так она же не умеет сохранять дерево фотографий. Под фото-архивом я подразумевал, что заливаться будет по альбомам. Или я что-то недосмотрел?
        Я, наверное, и так много прошу, но желательно всё это дело для мака, хоть и не критично.
        • 0
          нет, к сожалению она только отдельно в альбом грузит(
          Самому бы такое счастье, чтоб раз и выгрузило все, но пока лучше дропбокса или ему подобных с этим никто не справляется…
  • 0
    Использование Smarty не оправдано.
    • +1
      А что надо было использовать?
      • 0
        Twig в тестах вроде быстрее, если верить Фабиену
        • 0
          Я видел ровно противоположные тесты, где-то тут на Хабре они есть.
        • 0
          Быстрее в данном случае тот, который привычно использовать.
          Нагрузки на сервер смешные — там всего лишь три закешированных страницы. Можно было обойтись даже статикой, но привычка MVC дала о себе знать.
      • 0
        Альтернативный синтаксис PHP
    • 0
      Помоему ваабще использование шаблонизатора для столь малого функционала неоправдано.
  • +1
    — для полноэкранного режима почему-то используется фотка размера M;
    — хотелось бы листать вперед пробелом, а назад по backspace (на клавиатуре ноутбука «вправо» — не самая удобная кнопка);
    — если быстро полистать туда-сюда, то всё пропадает (даже кнопка «закрыть окно»);
    — на галерее из 500 фоток всё умирает почти каждый раз.
  • +1
    А случайный альбом случайно показывает один и тот же )
    • +12
      • +1
        Так и есть =)
        • 0
          Да, очень случайно =)

          Из огромной кучи пользователей Я.Фоток Ваш генератор случайных имён выдал (чисто случайно!) имя, совпадающее с Вашим ником! =)
  • +1
    гиковский проект: фотки с нуля начинаются ^_^
  • 0
    Полезная вещь!
    Ещё хочется кнопочку для отображения данных EXIF и ссылку на полноразмер фотографии
  • +1
    Посмотрел. Очень полезная штука, но вот с масштабированием фоток надо что-то делать. Я, перед выкладыванием фотографий в Сеть, оптимизирую их под просмотр на мониторе: вертикальные — 650пикс. по высоте, горизонтальные — 750пикс по ширине. Ваш сервис все-равно растягивает их на весь экран, превращая в кашу. Надо научить его отличать большие фотографии от маленьких:)
    • 0
      750 при нынешних экранах — малаватабудет)

      Но про масштабирование сервиса согласен.
    • 0
      Отсюда следует интересный вывод: ваша оптимизация не оптимальна :-)
      Зачем их самому уменьшать сверх меры? — Большинство сервисов и браузеров сами прекрасно справляются с этой задачей.
      • 0
        К сожалению, не справляются. Я все фотографии, перед размещением в Сети ужимаю вручную. Потому что мало просто уменьшить размер. Надо еще восстановить качество, правильно сохранить.
  • 0
    На загрузке альбома с паролем просто висит полоса загрузки.
    • 0
      Альбомы с паролем не поддерживаются. К сожалению мы не нашли никакой подходящей документации по процессу работы с ними у Яндекса.
      • 0
        Ну это ясно. Хотелось бы просто указания, что альбом запаролен. А то непонятно, то ли интернет глючит, то ли сайт.
  • 0
    Отличная реализация! Если бы была возможность слайдшоу и возможности послать ссылку сразу на развернутое слайдшоу как в Picasa, то я бы окончательно перестал бы терзаться уходом с Picasa на Яндекс.Фотки.
    • 0
      Можно отправить ссылку сразу на открытое изображение. Слайдшоу реализуем когда-нибудь по свободе.
      Ну или кто-нибудь подправит сырцы и запушит на гитхаб ;)
  • 0
    Fatal error: Theme at /galleria-themes/folio/galleria.folio.min.js could not load, check theme path. честенько
  • 0
    Классная задумка,
    только случайный альбом всегда один и тот же
  • 0
    А реализуема ли возможность скачивать весь альбом пользователя в виде ZIP/RAR-архива?
    • 0
      Скорее всего нет — для этого надо или выкачивать все фотографии альбома на сервер (что даст тонны трафика), либо писать Java applet, который скачает фотографии и сохранит их локально (здесь я пас).
      • +1
        • 0
          Ого! Буду знать.
          Тогда генерация zip реальна, да.
          Нужно будет протестировать производительность — насколько это реально для пакования сотен мегабайт фотографий.
          • 0
            Насчет сотен мегабайт — очень врядли. Но надо пробовать, может и по 10 фоток (~50 МБ) и получится сохранить.
            С другой стороны, вот еще нашел — team23.ru/yaArchive.html — попробуйте поковырять, либо разобраться, как у них устроено, либо же просто заюзать через собственные запросы.
  • +2
    Хороший сервис получился. И то что сорцы на гитхабе — молодцы.

    Улыбнуло:
    catch (Exception $e){
                echo('Произошел раскол крабовой туманности в момент'.str_rot13($controller).$e->getMessage()); die(0);
            }
    
  • 0
    Спасибо!
    Было бы круто, на самом деле, встраивать эту штуку себе на сайт, менять стили и так далее.
    • 0
      Исходники открыты — забирайте, меняйте по своему желанию.
  • 0
    Показываем произвольные фотки из яндекса на выбранную тематику с выбранным бэкграундом xD

    $object = «мотор»;
    $color=«white»;
    $size=«medium»;

    $rnd_page = rand(1, 249);
    $url =«images.yandex.ru/yandsearch?icolor={$color}&isize={$size}&p={$rnd_page}&text={$object}»;

    $handle = fopen($url, «r»);
    $contents = stream_get_contents($handle);
    fclose($handle);

    $found = preg_replace("/([\r\n])[\s] /", "", $contents);
    preg_match_all("#
    • 0
      $rnd_page = rand(1, 249);
      $object = «мотор»;
      $color=«white»;
      $size=«medium»;

      $url =«images.yandex.ru/yandsearch?icolor={$color}&isize={$size}&p={$rnd_page}&text={$object}»;

      $handle = fopen($url, «r»);
      $contents = stream_get_contents($handle);
      fclose($handle);

      $found = preg_replace("/([\r\n])[\s] /", "", $contents);
      preg_match_all("#
  • 0
    Давно хотел такую штуку запилить, остановился когда понял что api выдает фотки не в том порядке как они отсортированы в интерфейсе яфоток а в каком-то своем (не помню уже, по дате загрузки вроде). Т.е. если я заливал фотки в случайном порядке а потом их руками перетащил как мне надо, то я этот порядок никак не узнаю из api. Этот косяк отбил всякое желание пользоваться сервисом. Причем во фликре например api устроено так, что порядок ручной сортировки является порядком по умолчанию. Какой такой извращенной логикой рукодоствовались в яндексе, не понятно. На мой вопрос в группу разработчики ответили что такой функции не будет, потому что она не может быть кому-либо нужна, «я не представляю себе сценария когда такое поведение может пригодиться», примерно так ответили, забавные они там.
    • 0
      Там полная беда с сортировкой и постраничной выдачей. Если фоток больше 100, то надо использовать сортировку по умолчанию, иначе выдача зацикливается.
  • +2
    Классно было бы сделать а-ля www.flickriver.com/
    В адресной строке например
    fotki.yandex.ru/users/username/albums/
    дописываешь в домене «fotker»
    fotki.yandexfotker.ru/users/username/albums/
    и хоп — всё красивое и модное ;)
    • 0
      да, с доменом явно нужно что-то придумать, fotker.fdzn.net вообще не запоминается
  • 0
    Конечно было бы круто сделать авторизацию в яндексе.
    Многие пользователи яндекс фоток не делают все фотографии публичными.
    В тоже время иногда самому хочется их пересмотрет.

    Реализация не сложная.
    Странно что сразу не сделали.
    • 0
      В описании API не нашли этого момента — как авторизовать для JSON?
      • 0
        Json — это способ описания обьектов сервера яндекс фоток при передаче на сторону клиента.
        Для одного API могут даже поддерживаться разные форматы передачи обьектов — например Xml или Atom.
        При этом описания самих методов не изменятся.

        Может конечно я чего то не понимаю и для json — api фоток какой то особенный.
        Но впринципе он поддерживает OAuth.
        Это стандарт авторизации пользователя для внешних api на сегодняшний момент.
        Вот тут все написано.

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

        Там все написано вобщем. Я бы взялся за это — но не php девелопер, поэтому лезть туда не хочу.

      • 0
        То есть авторизационные данные вы пишете не в виде json.

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

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.