Question

I’m using the jQuery EmbedPicasaGallery plugin on my website. Everything is working fine, except I need the ALBUM DESCRIPTION and this plugin gets the TITLE, but not the DESCRIPTION.

I don’t know how to configure the plugin to label the albums with the album description, and
I’m not a programmer so I’m not sure how to change the code if that is what is needed.

I really hope you can help me with an example configuration or something like that.
Thanks for your time.

Answer 1

It doesn’t appear that the JQuery EmbedPicasaGallery plugin natively supports putting the Picasa album description under the album image at this time.

However, if you are using the most recent version (1.0.474), and you make a local copy you can adjust the code as follows to do what you need:

---

First: Patch jquery.EmbedPicasaGallery.js with these changes:

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

This adds two new options to the jQuery.EmbedPicasaGallery.js plugin:

album_toggle

• An array of two functions to act as callbacks when an album is opened and closed.
• Active when a user selects an album from the album list.
• The first function is called on album open with the album information.
• The first function is passed an object with the following properties:
  • title
  • photoCount
  • description
• The second function is called on an album close.

album_hover

• An array of two functions to act as callbacks when an album is hovered over.
• Active when a user is hovering the mouse over an album in the album list.
• The first function is called when the mouse is hovering over the album image.
• The first function is passed an object with the following properties:
  • title
  • photoCount
  • description
• The second function is called when the mouse stops hovering over the album image.

Next: Initialize the jquery.EmbedPicasaGallery plugin and provide an implementation for each of these callback function options in order to update your info div with the album information.

Here is an example:

 $(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]
    });
});

I’ve posted a working example at this jsfiddle page. In it you will see the patched code for jQuery.EmbedPicasaGallery.js, followed by initialization code (you will need to scroll the javascript section to see the initialization code). The initialization code is using a public gallery in which two of the albums had descriptions (This is not my gallery, but one I found on the featured pictures page). If you select an album, the album should display with 15 pictures and the description under the pictures.

Note:

At the bottom of the JavaScript panel in the jsfiddle, if you scroll down, you will see this code:

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]
});

If you replace 104892222647195875709 with your picasa userid, and remove the matcher line, you should see your public Picasa galleries after you click the Run button.

For example, if your Picasa userid is 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]
});

Additionally, I’ve provided the patched code as a GitHub gist.