Google Picasa – фотогалерея для Вашего сайта

30

Google Photogallery Gadget

Недавно набрел на симпатичную галерею “smoothgallery“. Решил добавить подобную галерею для странички iGoogle странички. Немного изучив API PicasaWeb получил результат…

Google Gadget

Вы можете добавить Google Photogallery как гаджет используя ссылку http://photogallery.hohli.com/photogallery.xml.

Гаджет в качестве параметра имени альбома использует алиас вашего альбома, а не реальное имя, чтобы увидеть его вам достаточно перейти на страничку вашего альбома и посмотреть на URL:

http://picasaweb.google.com/AntonShevchuk/DigitalPhotoRu/

В данном примере AntonShevchuk – имя пользователя, DigitalPhotoRu – алиас для альбома Digital-photo.ru

Интеграция без использования gadget’а

Шаг 1

Для Google pages
Залейте все файлы с архива на Google pages.
Откройте ‘page editor’, кликните на ссылку ‘edit html’ и вставьте следующий код (или воспользуйтесь файлом index.html для примера):

<link rel="stylesheet" href="jd.gallery.css" type="ext/css" media="screen" />
<script src="mootools.js" type="text/javascript"></script>
<script src="jd.gallery.js" type="text/javascript"></script>
<script src="picasa.gallery.js" type="text/javascript"></script>

Для других сайтов
Откройте ‘HTML’ файл для редактирования и вставьте следующий код между тэгами ‘head’:

<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<script src="scripts/mootools.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/picasa.gallery.js" type="text/javascript"></script>

Шаг 2

Вставьте еще и этот код… (только измените параметры ‘user’ и ‘album’):

<script type="text/javascript">
    var userid = 'AntonShevchuk';
    var album = 'DigitalPhotoRu';
    var maxres = 5; // 0 - for all;
    
    var url = 'http://picasaweb.google.com/data/feed/api/userid/' + userid + '/album/' + album + '?kind=photo&alt=json-in-script&callback=renderer&access=public&start-index=1';
    
    if (maxres != 0) {
        url = url + '&max-results=' + maxres;
    }
    loadJS(url);
</script>

и этот…:

<div id="myGallery"></div>

Ссылки

Download 0.1.3Google Photogallery

17 thoughts on “Google Picasa – фотогалерея для Вашего сайта”

  1. Очень полезная статья, спасибо Вам, Антон.
    А можно ли как-нибудь вставить несколько Google Photogallery на одну страницу?

  2. @Sasha:
    Если использовать как Google Gadget – то проблем не будет, а вот с обычной реализацией – то тут таки надо будет внести изменения в код файла picasa.gallery.js, т.к. тама захардкоджено использование элемента с id = myGallery

  3. При использовании Google Gadget, когда вставляю несколько сгенерированных скриптов, показывается только первый, а остальные почему то становятся не доступны.

  4. Статья полезная. Пока все работало – было супер. Но теперь перестали отображаться фото. В том числе и в ваших примерах. Что поменялось, известна ли причина?

    1. Привет
      Как разберусь что изменили гугловцы – сразу обновлю виджет, у всех пользователей он обновится автоматически…

  5. Добрый день, Антон,

    Вопрос, можно ли менять размеры отображаемого окна?
    При изменения параметров виджета заданы размеры 404px и 324px. Соотвественно при изменении чисел размер окна галереи не меняется, лишь появляются “отступы”.

    Отличный виджет!

  6. Виджет отличный, вот только у меня такой же вопрос, как и у Taras. Хотелось бы менять размеры. Спасибо!

  7. То что было сгенерировано раньше работает – а виджет по прежнему нет. Жаль – было очень удобно.

  8. При использовании Вашего варианта пикаса галереи у меня возникла проблема что опера отображает почему-то по две копии фоток, а тупой експлорер (IE) вообще не хочет показывать галерею. Подскажите пожалуйста в чем может быть проблем? Заранее спасибо.

  9. Так это можно использовать как замену лайтбокса с использованием фоток непосредственно с хоста или только из альбома гугла?

  10. Здравствуйте.
    Большое спасибо за статью. Уверен очень полезно.
    Я всё сделал как вы сказали, но когда меняю user и password на свои, то галерея пропадает, т.е. не отображается. ((

    адресная строка: http://picasaweb.google.com/http87/ASYA#

    Код на странице:

    <script type="text/javascript">
        var user = 'AntonShevchuk';
        var album = 'DigitalPhotoRu';
        var maxres = 5; // 0 - for all;
     
        var url = 'http://picasaweb.google.com/data/feed/api/user/' + user + '/album/' + album + '?kind=photo&alt=json-in-script&callback=renderer&access=public&start-index=1';
     
        if (maxres != 0) {
            url = url + '&max-results=' + maxres;
        }
        loadJS(url);
    </script>
    
    1. Привет, используй новую ссылку на гаджет: http://js.hohli.com/photogallery/photogallery.xml
      В посте ссылки тоже обновил, попробовать гаджет можете так: http://www.gmodules.com/ig/creator?url=http://js.hohli.com/photogallery/photogallery.xml&up_user=http87&up_album=ASYA&synd=open&w=404&h=324&title=ASYA&border=%23ffffff%7C3px%2C1px+solid+%23999999

      P.S. Кошка уматная…

  11. Привет.
    Большое спасибо. Всё работает. Весьма благодарен.

  12. Ещё раз большое спасибо.
    Картинки листать можно, но только если я буду наживать на чёрную область. т.е. если я буду генерировать галерею с помощью модуля, то у меня не будет тех симпатичных кнопочек, которые появляются при на наведении на галерею мышью (я о тех, что можно увидеть, если скачать ваш модуль). Как мне теперь к с генерированному модулю присобачить *.css?

  13. Пикаса сама сейчас генерирует слайдшоу, достаточно зайти в альбом, справа есть ссылка на альбом, при открытии выскакивает предложение с хтмл-кодом слайдшоу, выбираешь размер, копируешь и вставляешь у себя на сайте. Всё работает как часы. Жаль только плиточного отображения нет.

Comments are closed.