Question

我正在使用我网站上的jQuery EmbedPicasaGallery插件。一切都很好，除了我需要ALBUM DESCRIPTION，这个插件得到TITLE，但不是说明。

我不知道如何配置插件以使用相册描述标记相册，以及我不是程序员，所以如果需要的话，我不知道如何更改代码。

我真的希望你能帮我一个配置示例或类似的东西。谢谢你的时间。

Answer 1

似乎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

打开和关闭相册时两个函数的数组，用作回调。
当用户从相册列表中选择相册时有效。
第一个功能在专辑打开时调用，包含专辑信息。
第一个函数传递一个具有以下属性的对象：
- title
- photoCount
- description
第二个功能在专辑关闭时调用。

album_hover

当一张专辑悬停时，两个函数的数组作为回调。
当用户将鼠标悬停在相册列表中的相册上时处于活动状态。
当鼠标悬停在相册图像上时，将调用第一个函数。
第一个函数传递一个具有以下属性的对象：
- title
- photoCount
- description
当鼠标停留在专辑图像上时，将调用第二个函数。

下一步：初始化jquery.EmbedPicasaGallery插件并为每个回调函数选项提供实现，以便使用相册信息更新您的信息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 page发布了一个有效的例子。在其中，您将看到jQuery.EmbedPicasaGallery.js的修补代码，然后是初始化代码（您需要滚动javascript部分以查看初始化代码）。初始化代码使用的是一个公共图库，其中有两张专辑有描述（这不是我的图库，而是我在特色图片页面上找到的图片）。如果选择相册，相册应显示15张图片和图片下的说明。

注意：

在jsfiddle的JavaScript面板底部，如果向下滚动，您将看到以下代码：

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用户ID，并删除匹配器行，则在点击运行按钮后，您应该会看到公开的Picasa图库。

例如，如果您的Picasa用户ID是 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提供。

使用jQuery EmbedPicasaGallery插件，如何获取专辑说明？

1 个答案: