Не похоже, что плагин JQuery EmbedPicasaGallery изначально поддерживает размещение описания альбома Picasa под изображением альбома.
Однако, если вы используете самую последнюю версию (1.0.474),и сделав локальную копию, вы можете настроить код следующим образом, чтобы сделать то, что вам нужно:
Первый : Патч jquery.EmbedPicasaGallery.js с этими изменениями:
--- jquery.EmbedPicasaGallery.js 2011-08-31 10:48:22.424194969 -0400
+++ jquery.EmbedPicasaGallery.new.js 2011-09-13 20:40:34.785261085 -0400
@@ -103,6 +103,14 @@
opts // add options
);
+ function callbackWithInfo(opts,callback,idx,info) {
+ if (opts[callback] &&
+ $.isArray(opts[callback]) &&
+ $.isFunction(opts[callback][idx])) {
+ opts[callback][idx](info);
+ }
+ }
+
function showOverview() {
var $this,
meta_opts,
@@ -129,8 +137,9 @@
function appendImage(i,item){
- var title,$div,$img;
+ var title,$div,$img,desc;
title = item.media$group.media$title.$t;
+ desc = item.media$group.media$description.$t;
if (title.match(meta_opts.matcher)){
albumCount++;
$img = $('<img/>')
@@ -145,11 +154,22 @@
})
.click(function () {
$album_list.hide();
- showAlbum($this,meta_opts,item.gphoto$id.$t,title,item.gphoto$numphotos.$t);
+ showAlbum($this,meta_opts,item.gphoto$id.$t,title,item.gphoto$numphotos.$t,desc);
})
.hover(
- function () { $(this).css("cursor","pointer")},
- function () { $(this).css("cursor","default")}
+ function () {
+ $(this).css("cursor","pointer");
+ callbackWithInfo(meta_opts,'album_hover',0, {
+ title: title,
+ photoCount: item.gphoto$numphotos.$t,
+ description: desc
+ });
+ $(this).css("cursor","pointer")
+ },
+ function () {
+ $(this).css("cursor","default");
+ callbackWithInfo(meta_opts,'album_hover',1,{});
+ }
)
.append( $img )
.append(
@@ -209,10 +229,16 @@
+ '&alt=json-in-script&thumbsize=' + meta_opts.size + 'c&callback=?',
renderAlbumList
);
- }
+ }
};
- function showAlbum($this,meta_opts,album,title,photoCount){
+ function showAlbum($this,meta_opts,album,title,photoCount,desc){
+ callbackWithInfo(meta_opts,'album_toggle',0,{
+ title: title,
+ photoCount: photoCount,
+ description: desc
+ });
+
if ( Cache[album] ){
Cache[album].show();
return;
@@ -266,7 +292,10 @@
if (Cache.__overview && !meta_opts.hide_back){
$album.append(makeButton(meta_opts.msg_back)
- .click(function(){$album.hide();showOverview()})
+ .click(function(){
+ callbackWithInfo(meta_opts,'album_toggle',1,{});
+ $album.hide();
+ showOverview()})
);
}
$this.prepend($album);
Это добавляет две новые опции к плагину jQuery.EmbedPicasaGallery.js:
album_toggle
- Массив из двух функций для действиякак обратные вызовы, когда альбом открывается и закрывается.
- Активируется, когда пользователь выбирает альбом из списка альбомов.
- Первая функция вызывается при открытии альбома с информацией об альбоме.
- Первой функции передается объектсо следующими свойствами:
titlephotoCountdescription
- Вторая функция вызываетсязакрытие альбома.
album_hover
- Массив из двух функций, выполняющих функции обратных вызовов при наведении курсора на альбом.
- Активен, когда пользователь наводит указатель мыши на альбом в списке альбомов.
- Первая функция вызывается, когда указатель мыши наводится на изображение альбома.
- Первая функцияпередал объект со следующими свойствами:
titlephotoCountdescription
- Вторая функциявызывается, когда мышь перестает зависать над изображением альбома.
Далее : инициализировать jquery.EmbedPicasaGalleПлагин ry и обеспечивает реализацию для каждого из этих параметров функции обратного вызова, чтобы обновить ваш информационный div с информацией об альбоме.
Вот пример:
$(function (){
var $info = $('#info');
function showInfo(info) {
$info.html(info.title + " (" + info.photoCount + " photos) " + info.description).fadeIn('slow');
}
function hideInfo() {
$info.hide().empty();
}
//This is the code you would change to use your own gallery,
//instead of this random public one, see note below.
jQuery("#pics").EmbedPicasaGallery('104892222647195875709', {
matcher: /(neko\/lepestok_sakuri|нэко \/ котята)/,
show_more: 20,
loading_animation: 'css/loading.gif',
album_title_tag: '<h3/>',
album_hover: [showInfo,hideInfo],
album_toggle: [showInfo,hideInfo]
});
});
Я опубликовалрабочий пример на этой jsfiddle странице .В нем вы увидите пропатченный код для jQuery.EmbedPicasaGallery.js, а затем код инициализации (вам нужно прокрутить раздел javascript, чтобы увидеть код инициализации).Код инициализации использует общедоступную галерею, в которой два альбома имели описания (это не моя галерея, а одна, которую я нашел на странице избранных изображений).Если вы выбираете альбом, альбом должен отображаться с 15 изображениями и описанием под изображениями.
Примечание:
В нижней части панели JavaScript в jsfiddle, если вы прокрутите вниз, вы увидите этот код:
jQuery("#pics").EmbedPicasaGallery('910489222264719587570', {
matcher: /(neko\/lepestok_sakuri|нэко \/ котята)/,
show_more: 20,
loading_animation: 'css/loading.gif',
album_title_tag: '<h3/>',
album_hover: [showInfo,hideInfo],
album_toggle: [showInfo,hideInfo]
});
Если вы замените 104892222647195875709 на свой идентификатор пользователя в Picasa и удалите строку соответствия, вы должны увидеть свои общедоступные галереи Picasa после нажатия кнопки Выполнить .
Например, если ваш PicasaИД пользователя: fecapeluda :
jQuery("#pics").EmbedPicasaGallery('fecapeluda', {
show_more: 20,
loading_animation: 'css/loading.gif',
album_title_tag: '<h3/>',
album_hover: [showInfo,hideInfo],
album_toggle: [showInfo,hideInfo]
});
Кроме того, я предоставил исправленный код в виде GitHub gist .