Недавно набрел на симпотичную галерею “smoothgallery“. Решил добавить подобную галлерею для странички antonshevchuk.googlepages.com. Немного изучив API PicasaWeb получил результат…
Google Gadget
Вы можете добавить Google Photogallery как гаджет используя ссылку:
http://antonshevchuk.googlepages.com/photogallery.xml или можете сгенерировать embed код для интеграции в HTML.
Гаджет в качестве параметра имени альбома использует алиас вашего альбома, а не реальное имя, чтобы увидеть его вам достаточно перейти на страничку вашего альбома и посмотреть на 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="text/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 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>
и этот…:
<div id="myGallery"></div>
Ссылки
Download0.1.3Google Photogallery
Special edition for Google Pages:
This entry was posted
on Friday, May 18th, 2007 at 19:20 and is filed under Google, JavaScript.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Очень полезная статья, спасибо Вам, Антон.
А можно ли как-нибудь вставить несколько Google Photogallery на одну страницу?
@Sasha:
Если использовать как Google Gadget – то проблем не будет, а вот с обычной реализацией – то тут таки надо будет внести изменения в код файла picasa.gallery.js, т.к. тама захардкоджено использование элемента с id = myGallery
При использовании Google Gadget, когда вставляю несколько сгенерированных скриптов, показывается только первый, а остальные почему то становятся не доступны.
Статья полезная. Пока все работало – было супер. Но теперь перестали отображаться фото. В том числе и в ваших примерах. Что поменялось, известна ли причина?
Привет
Как разберусь что изменили гугловцы – сразу обновлю виджет, у всех пользователей он обновится автоматически…
Спасибо за оперативный ответ.
Добрый день, Антон,
Вопрос, можно ли менять размеры отображаемого окна?
При изменения параметров виджета заданы размеры 404px и 324px. Соотвественно при изменении чисел размер окна галереи не меняется, лишь появляются “отступы”.
Отличный виджет!
Виджет отличный, вот только у меня такой же вопрос, как и у Taras. Хотелось бы менять размеры. Спасибо!