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

Скачать можно тута.
Посмотреть пример 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")
comments powered by Disqus

0 комментариев

Оставить комментарий