Это отличный урок, который научит Вас вставлять фотогалереи PICASA от GOOGLE в любые страницы с помощью jQuery.

Создание галереи фотографий на собственном сайте не такое уж и простое дело. Мне до этого момента не встречалось нормальных решений. Есть хорошие варианты, но все же они далеки от совершенства.

Решение, которое я сейчас покажу Вам очень классное. Все фотки хранятся в альбомах PICASA GOOGLE, а на Ваших страницах размещаются миниатюры, при нажатии на которые в красивом лайтбоксе всплывают полные варианты.

Я вижу много плюсов у данного метода:

1) Все фотки хранятся на внешнем сервере, экономя при этом Ваш трафик
2) Наличие у PICASA собственного бесплатного софта, который позволяет гибко управлять фотками и альбомами
3) Простота использования

Взгляните на демо для наглядного примера:

Теперь давайте разбираться как это сделать!

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

<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('max.ukraine',{ 
loading_animation: 'css/loading.gif',
matcher: /Алиса/
});
})
</script>

То есть я тут только задаю свой логин в GOOGLE, далее прописываю картинку для загрузки и, наконец, указываю какой альбом необходимо достать!

Вот и все! Все предельно просто. С помощью стилей можно оформить вывод картинок в любом виде и последовательности.

Пользуйтесь! Экспериментируйте! И все у Вас получится!

P.S. чуть не забыл )) Выводить галерею необходимо так: <div id="images"></div>. Класс прописывается тут - jQuery("#images").