Скачать можно тута.
Посмотреть пример 1
Посмотреть пример 2
Посмотреть пример 3
Посмотреть пример 4

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

<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")

Посмотреть пример можно тут.
Скачать можно тут.

Для HTML структуры мы создадим элемент div с классом и id “hs_container”. Внутри мы разместим разные поля для изображений с разными картинками. У первой картинки будет класс “hs_visible”, который позволит ей отображаться поверх остальных.

<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">
<img class="hs_visible" src="images/area1/1.jpg" alt=""/>
<img src="images/area1/2.jpg" alt=""/>
<img src="images/area1/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area2">
<img class="hs_visible" src="images/area2/1.jpg" alt=""/>
<img src="images/area2/2.jpg" alt=""/>
<img src="images/area2/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area3">
<img class="hs_visible" src="images/area3/1.jpg" alt=""/>
<img src="images/area3/2.jpg" alt=""/>
<img src="images/area3/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area4">
<img sclass="hs_visible" src="images/area4/1.jpg" alt=""/>
<img src="images/area4/2.jpg" alt=""/>
<img src="images/area4/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area5">
<img class="hs_visible" src="images/area5/1.jpg" alt=""/>
<img src="images/area5/2.jpg" alt=""/>
<img src="images/area5/3.jpg" alt=""/>
</div>
</div>

CSS
В нашей таблице стилей мы определим площади и их уровни. Поскольку они будут абсолютно позиционированы, мы также присвоим им координаты (позицию). Начнем с главного контейнера:

.hs_container{
  position:relative;
  width:902px;
  height:471px;
  overflow:hidden;
  clear:both;
  border:2px solid #fff;
  cursor:pointer;
  -moz-box-shadow:1px 1px 3px #222;
  -webkit-box-shadow:1px 1px 3px #222;
  box-shadow:1px 1px 3px #222;
  }

Важно обязатльно указать overflow:hidden, так как мы не хотим чтобы выезжающие изображения показывались вне данного контейнера.

Каждая отдельная площадь будет также иметь overflow:hidden и абсолютное позиционирование:

.hs_container .hs_area{
  position:absolute;
  overflow:hidden;
  }

Мы позиционируем изображения внутри нашей площади и делаем их видимыми:

.hs_area img{
  position:absolute;
  top:0px;
  left:0px;
  display:none;
  }

Первое изображение будет видимым и поэтому мы ему придаем класс:

.hs_area img.hs_visible{
  display:block;
  z-index:9999;
  }

А теперь мы определим границы и позиции каждого поля:

.hs_area1{
  border-right:2px solid #fff;
  }
  .hs_area4, .hs_area5{
  border-top:2px solid #fff;
  }
  .hs_area4{
  border-right:2px solid #fff;
  }
  .hs_area3{
  border-top:2px solid #fff;
  }
  .hs_area1{
  width:449px;
  height:334px;
  top:0px;
  left:0px;
  }
  .hs_area2{
  width:451px;
  height:165px;
  top:0px;
  left:451px;
  }
  .hs_area3{
  width:451px;
  height:167px;
  top:165px;
  left:451px;
  }
  .hs_area4{
  width:192px;
  height:135px;
  top:334px;
  left:0px;
  }
  .hs_area5{
  width:708px;
  height:135px;
  top:334px;
  left:194px;
  }

JavaScript
Для эффекта смены слайдов мы будем использовать классный плагин jQuery Easing Plugin. Не забудьте его подключить вверху страницы.
Для начала давайте определим некоторые переменные.

//пользовательская анимация
  //смена слайдов
  var animations		= ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
  var total_anim		= animations.length;
  //смените опции ниже на любую возможную из плагина easing 
  var easeType		= 'swing';
  //скорость смены
  var animSpeed		= 450;
  //кеширование
  var $hs_container	= $('#hs_container');
  var $hs_areas		= $hs_container.find('.hs_area');

Когда мы мышкой наводим на определенную площадь с изображением происходит одна из анимаций из нашего массива выше, и появляется следующая картинка. Мы будем использовать метку «over» для того, чтобы знать можем ли мы применять анимацию на определенной площади, так как мы не хотим ситуации, когда несколько анимаций будут происходит одновременно.

У нас будет сюжет для каждой анимации и мы четко определим ее поведение.

//для начала загрузить все изображения
  $hs_images          = $hs_container.find('img');
  var total_images    = $hs_images.length;
  var cnt             = 0;
  $hs_images.each(function(){
  var $this = $(this);
  $('<img>').load(function(){
  ++cnt;
  if(cnt == total_images){
  $hs_areas.each(function(){
  var $area 		= $(this);
  //Когда мышка переходит границу площади мы анимируем
  //изображение (случайная анимация из массива),
  //так, чтобы появилась следующая картинка.
  //"over" метка которая указывает на то, можем ли мы анимировать
  //площадь или нет
  $area.data('over',true).bind('mouseenter',function(){
  if($area.data('over')){
  $area.data('over',false);
  //Сколько изображений в этой площади?
  var total		= $area.children().length;
  //видимые изображения
  var $current 	= $area.find('img:visible');
  //индекс видимых изображений
  var idx_current = $current.index();
  //следующее изображение для показа
  var $next		= (idx_current == total-1) ? $area.children(':first') : $current.next();
  //показать следующее (пока еще не видимое)
  $next.show();
  //выбрать случайную анимацию
  var anim		= animations[Math.floor(Math.random()*total_anim)];
  switch(anim){
  //выезд справа
  case 'right':
  $current.animate({
  'left':$current.width()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //теперь слева
  case 'left':
  $current.animate({
  'left':-$current.width()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //...сверху
  case 'top':
  $current.animate({
  'top':-$current.height()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'top'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //... снизу
  case 'bottom':
  $current.animate({
  'top':$current.height()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'top'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //справа и расстворение
  case 'rightFade':
  $current.animate({
  'left':$current.width()+'px',
  'opacity':'0'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px',
  'opacity'	: '1'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //слева и расстворение
  case 'leftFade':
  $current.animate({
  'left':-$current.width()+'px','opacity':'0'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px',
  'opacity'	: '1'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //сверху и расстворение
  case 'topFade':
  $current.animate({
  'top':-$current.height()+'px',
  'opacity':'0'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'top'		: '0px',
  'opacity'	: '1'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  //снизу и расстворение
  case 'bottomFade':
  $current.animate({
  'top':$current.height()+'px',
  'opacity':'0'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'top'		: '0px',
  'opacity'	: '1'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  default:
  $current.animate({
  'left':-$current.width()+'px'
  },
  animSpeed,
  easeType,
  function(){
  $current.hide().css({
  'z-index'	: '1',
  'left'		: '0px'
  });
  $next.css('z-index','9999');
  $area.data('over',true);
  });
  break;
  }
  }
  });
  });
  //При нажатии в любом месте происходит смена на всех площадях
 
  $hs_container.bind('click',function(){
  $hs_areas.trigger('mouseenter');
  });
  }
  }).attr('src',$this.attr('src'));
  }); 

1. Для начала убедитесь, что в блоге подключена библиотека jQuery.
Как подключить jQuery?
Для начала скачиваем библиотеку jQuery с сайта разработчиков.
В большинстве браузеров скачивается файл, название которого выглядит примерно так: jquery-1.4.2.min.js
Однако в некоторых браузерах этот файл не скачивается, а открывается, как обычный текстовый. И это понятно, ведь он и является по сути обычным текстовым файлом.
Если вместо скачивания файл пытается открыться, то в окне, которое показывает содержимое этого файла, скопируйте путь к нему, а потом воспользуйтесь менеджером закачки.

Обычно js-скрипты записываются в специальную папку, которая находится в папке с вашей темой.
При открытии страниц блога в браузере первым делом загружается все, что прописано в файле header.php (находится в папке вашей темы оформления). Вот с этим файлом и будем работать. Откройте его и найдите такие строчки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">

Вот сразу после них нужно вставить указание подгружать библиотеку jQuery:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>

Обратите внимание на эту строчку, особенно на то, что записано в простых скобках внутри src="..." — это путь к библиотеке, которую мы загрузили на сайт. Код автоматически вставляет путь к теме, которую вы используете, а js — это и есть та папка, которая находится в папке вашей темы, и в которую мы закачали файл.
Все, библиотека jQuery подключена.

Как загружать jQuery с сайта Google?
Сделать это достаточно легко — нужно удалить вызов этих скриптов из шаблонов вашей темы (обычно это прописано в header.php или footer.php), и добавить в файл functions.php такой код:

add_action( 'init', 'jquery_register' );
function jquery_register() {
if ( !is_admin() ) {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' ), false, null, true );
    wp_enqueue_script( 'jquery' );
   }
}

Этот код заставит скрипт jquery.min.js грузиться напрямую из хранилища Google.

2. Откройте файл, в котором нужно сделать табы (например, single.php), и вставьте в него такой код:

<ul class="tabs">
    <li><a rel="nofollow" href="#tab1">Таб1</a></li>
    <li><a rel="nofollow" href="#tab2">Таб2</a></li>
    <li><a rel="nofollow" href="#tab3">Таб3</a></li>
</ul>

<div class="tab_container">

    <div id="tab1" class="tab_content">
      Содержимое первого таба
    </div>

    <div id="tab2" class="tab_content">
      Содержимое второго таба
    </div>

    <div id="tab3" class="tab_content">
      Содержимое третьего таба
    </div>

</div>

Как видите, это очень простая структура. Сначала идет список табов, потом — содержимое табов. Для элементов сразу заданы стили. Чтобы придать всему этому красивое, ненавязчивое оформление, нужно описать стили для всех этих элементов.

3. Откройте файл style.css и вставьте в него код, задающий оформление используемых нами элементов.

ul.tabs { margin: 0 0 0 20px; padding: 0; float: left; list-style: none; height: 32px; width: 100%; }
ul.tabs li { float: left;   margin: 0; padding: 0; height: 31px; line-height: 31px; border: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #fff;  }
ul.tabs li a { text-decoration: none; color: #aaa; display: block; font-size: 1.0em; padding: 0 10px; border-bottom:#fff 1px solid; }
ul.tabs li a:hover { background: #fff;color: #000; border-bottom:#fff 1px solid; }
html ul.tabs li.active { background: #fff; border-top-left-radius:5px; border-top-right-radius:5px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; color:#000; border-bottom: #fff 1px solid; }
.tab_container { overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin-bottom:0px; background:#fff; border-top:#eee 1px solid;}
.tab_content { padding:0; }
html ul.tabs li.active a, html ul.tabs li.active a:hover {color:#000;}

В примере оформления для светлых блогов в белым фоном. Вы можете поиграть с этим оформлением, изменив его под дизайн своего блога. Ну и последний шаг — это подключение java-скриптов, чтобы совместить табы, оформление, и сделать красивое переключение между ними.

4. Откройте файл header.php и вставьте в него код скрипта:

<script type="text/javascript">
$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); 
        $(this).addClass("active"); 
        $(".tab_content").hide(); 

        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).fadeIn(); 
        return false;
    });

});
</script>

Этот скрипт переключает табы с затуханием, запоминает активный таб, при загрузке страницы делает активным первый таб.

Второй способ.
Первый способ, был основан на списках, в которых табами служили специальные ссылки. Эти ссылки показывали содержимое табов, оформленное особым образом и активируемое с помощью скрипта. Второй способ, попроще — нет эффектов во время смены содержимого табов, но и нет лишних внутренних ссылок для активации табов.
1. Откройте файл, в котором вы будете делать табы (обычно это single.php илиsidebar.php) и вставьте в него такой код:

<dl class="tabs">
                <dt class="selected">Таб1</dt>
                <dd class="selected">
                    <div class="tab-content">содержимое первого таба</div>
                </dd>                                                               
                <dt>Таб2</dt>
                <dd>
                    <div class="tab-content">содержимое второго таба</div>
                </dd>
                <dt>Таб3</dt>
                <dd>
                    <div class="tab-content">содержимое третьего таба </div>  
                </dd>                           
            </dl>

2. Как видите, табы и их содержимое находятся в одной таблице. Чтобы они приобрели нужное оформление, отредактируйте файл style.css, вставив в него код:

.tabs { width:400px; overflow:hidden; margin:0; zoom:1; padding:1px ;position:relative; }
.tabs dt { float:left; line-height:2; height:2em; background:#fff; border:1px solid #ccc; border-bottom:0; padding:0 1em; position:relative; left:35px; margin-right:1px; cursor:pointer; }
.tabs dt:hover { background-color:#ccc; }
.tabs dt.selected { border-color:#aaa; background:#fff; z-index:3; cursor:auto; }
.tabs dd { background:#fff; display:none; float:right; width:100%; margin:2em 0 0 -100%; position:relative; z-index:2; }
.tabs dd.selected { display:block; }
.tabs .tab-content { background:#fff; border:1px solid #ccc; padding:20px 20px 10px 20px; }

В этом примере кода ширина табов равна 400 px, фон белый, цвет шрифтов черный, рамка вокруг табов серая.
3. Чтобы активировать табы и автоматически выделить первый, нужно подключить скрипт. Откройте файл header.php, и вставьте в него такой код:

<script type="text/javascript">
            $(function(){
                $('dl.tabs dt').click(function(){
                    $(this)
                        .siblings().removeClass('selected').end()
                        .next('dd').andSelf().addClass('selected');
                });
            });
        </script>

Табличная верстка упрощает использование табов, делает их более логически правильными, а несложный скрипт отслеживает, чтобы первый таб всегда был активирован при загрузке страницы.