Google Picasa – фотогалерея для Вашего сайта // Google
Недавно набрел на симпатичную галерею “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>