Вставка фотогалерей PICASA с помощью jQuery

Скачать: file.alice2k.ru/2011/web/PICASA.rar u.abcd.bz/picasa
Пример 1: websouls.ru/h/picasa_small/
Пример 2: websouls.ru/h/picasa_big/
Пример 3: websouls.ru/h/picasa/
Пример 4: websouls.ru/h/picasa_3alboma/
B т.д. расширенные настройки под катом.

Первым делом как всегда необходимо подключить все внешние таблицы стилей и скрипты:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/javascript" src="slimbox2.js"></script>
<script type="text/javascript" src="jquery.EmbedPicasaGallery.js"></script>

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

Это детальная настройка, которая по сути не особо нужна.

<script type="text/javascript">
  jQuery(document).ready(function() {
  jQuery("#images").EmbedPicasaGallery('СЮДА ПИШИТЕ ВАШ ЛОГИН в ГУГЛ',{
      matcher:            /./,         
      size:               '72',        // thumbnail size (32, 48, 64, 72, 144, 160)
      msg_loading_list :  'Loading album list from PicasaWeb',
      msg_back :          'Back',
      authkey :           'optional-picasa-authkey',
      albumid :           'go-directly-to-this-album-ignore-matcher'
      album_title_tag:    '<h2/>'
      thumb_id_prefix:    'pThumb_',
      loading_animation: 'css/loading.gif',
      thumb_finalizer:    function(){var $a = jQuery(this); ... use this to do something to the anchor AFTER slimbox got there },
      thumb_tuner:        function($div,entry,i){ ... $div - слой с миниатюрой, с информацией о фотке ...}
      link_mapper: function(el){  // see http://code.google.com/p/slimbox/wiki/jQueryAPI#The_linkMapper_function
            return [
                     el.href,
                     '<a href="'+el.href+'">'+el.title+'</a>'
                   ]
            }
   });
  });
</script>

Первое на что необходимо обратить внимание — жирный текст — сюда необходимо вписать Ваш логин в GOOGLE PICASA (и соответственно во всех других сервисах GOOGLE). Скрипт будет брать фотографии именно с этого аккаунта.

Теперь пойдем по списку:

• matcher — важная настройка, так как она указывает на то, какие альбомы показывать, а какие нет. Оставьте /./ для отображения всех альбомов. Или допустим у Вас есть 10 альбомов с названием «Лучшие фото ...» (вместо ..., например, месяцы — Января, Февраля и т.д.), тогда можете вставить /Лучшие фото/ и только эти альбомы будут отображены. То есть скрипт ищет сходство в названии альбомов.
• size — тут все понятно. Это размер миниатюр доступны — 32, 48, 64, 72, 144, 160
• msg_loading_list — сообщение при загрузке списка альбомов
• msb_back — надпись на кнопке «Назад»
• authkey — опциональная настройка ключа авторизации в PICASA (можно не трогать)
• albumid — тут можно указать id альбома без всяких названий в первой найстройке.

Минимумом настроек:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#images").EmbedPicasaGallery('404666ru',{ 
loading_animation: 'css/loading.gif',
matcher: /123456/
});
})
</script>

Выводить галерею необходимо так:

<div id="images"></div>

Класс прописывается тут — jQuery("#images")