/jQuery.EmbedPicasaGallery.js
Forked from mwolfetech/jQuery.EmbedPicasaGallery.js
Created Jan 3, 2012
Adjustment to EmbedPicasaGallery to pass album description, photo count, and title back to user provided callback functions.
| /************************************************************************** | |
| * Name: EmbedPicasaGallery | |
| * Author: Tobias Oetiker <tobi@oetiker.ch> | |
| * Demo: http://tobi.oetiker.ch/photo/ | |
| * $Id: jquery.EmbedPicasaGallery.js 474 2011-06-16 09:02:45Z oetiker $ | |
| ************************************************************************** | |
| Description: | |
| [elided] | |
| **********************************************************************************/ | |
| (function($) { | |
| // setup a namespace for us | |
| var nsp = 'EmbedPicasaGallery', authkey; | |
| // Private Variables and Functions in the _ object | |
| // note that this will refer to _ unless you | |
| // call using the call or apply methods | |
| // Public Variables and Methods | |
| $[nsp] = { | |
| defaultOptions: { | |
| matcher : RegExp('.+'), | |
| size : 72, | |
| msg_loading_list : 'Loading album list from PicasaWeb', | |
| msg_back : 'back', | |
| msg_more : 'more', | |
| album_title_tag: '<h2/>', | |
| auto_open: false, | |
| thumb_id_prefix: 'pThumb_', | |
| thumb_tuner: null, | |
| thumb_finalizer: null, | |
| loading_animation: null, | |
| show_more: null, | |
| hide_back: false, | |
| link_mapper: function(el){ | |
| return [ | |
| el.href, | |
| '<a href="'+el.href+'">'+el.title+'</a>' | |
| ] | |
| } | |
| } | |
| }; | |
| $.fn[nsp] = function(user,opts) { | |
| var localOpts, | |
| Cache = {}; | |
| localOpts = $.extend( | |
| {}, // start with an empty map | |
| $[nsp].defaultOptions, // add defaults | |
| 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, | |
| albumCount, | |
| $album_list, | |
| authkey = ''; | |
| if ( Cache.__overview ){ | |
| Cache.__overview.show(); | |
| return; | |
| } | |
| $this = $(this); | |
| $this.empty(); | |
| meta_opts = localOpts; | |
| if ($.meta){ | |
| meta_opts = $.extend({}, localOpts, $this.data()); | |
| } | |
| albumCount = 0; | |
| $album_list = $('<div/>') | |
| .addClass('album-list') | |
| .css('position','relative') | |
| .css('overflow','hidden') | |
| .append($('<div/>').text(meta_opts.msg_loading_list)); | |
| function appendImage(i,item){ | |
| 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/>') | |
| .attr('title',title) | |
| .attr('src',item.media$group.media$thumbnail[0].url) | |
| $div = $('<div/>') | |
| .addClass('album-cover') | |
| .css({ | |
| 'float': 'left', | |
| marginRight: '10px', | |
| marginBottom: '10px' | |
| }) | |
| .click(function () { | |
| $album_list.hide(); | |
| showAlbum($this,meta_opts,item.gphoto$id.$t,title,item.gphoto$numphotos.$t,desc); | |
| }) | |
| .hover( | |
| 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( | |
| $('<div/>') | |
| .addClass('album-title') | |
| .css({ | |
| 'font-size': '10px' | |
| }) | |
| .text(title) | |
| .width( meta_opts.size ) | |
| ) | |
| $album_list.append($div); | |
| }; | |
| } | |
| function renderAlbumList(data){ | |
| var $albums,maxHeight=0; | |
| $album_list.empty(); | |
| if (data.feed && data.feed.entry){ | |
| $.each(data.feed.entry,appendImage); | |
| } else { | |
| $this.text('Warning: No picasa albums found for user ' + user); | |
| } | |
| Cache.__overview = $album_list; | |
| $albums = $album_list.children(); | |
| if (meta_opts.auto_open){ | |
| $albums.eq(0).click(); | |
| return; | |
| } | |
| $('.album-title',$album_list) | |
| .each(function(){ | |
| var h = $(this).outerHeight(); | |
| if (h > maxHeight){ | |
| maxHeight = h | |
| } | |
| }) | |
| .each(function(){ | |
| $(this).height(maxHeight) | |
| }); | |
| } | |
| if (meta_opts.authkey){ | |
| authkey = '&authkey=' + meta_opts.authkey; | |
| } | |
| if (meta_opts.albumid) { | |
| showAlbum($this,meta_opts,meta_opts.albumid) | |
| } | |
| else { | |
| $this.prepend($album_list); | |
| $.getJSON('http://picasaweb.google.com/data/feed/api/user/' | |
| + user + '?kind=album&access=visible' + authkey | |
| + '&alt=json-in-script&thumbsize=' + meta_opts.size + 'c&callback=?', | |
| renderAlbumList | |
| ); | |
| } | |
| }; | |
| 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; | |
| }; | |
| var i,$album,albumPics=[],$picDiv; | |
| $album = $('<div/>').addClass('album') | |
| .css('position','relative') | |
| .css('overflow','hidden'); | |
| if (title){ | |
| $album.append($(meta_opts.album_title_tag).text(title)) | |
| } | |
| function makeDiv(){ | |
| var $div = $('<div/>') | |
| .css({ | |
| 'float': 'left', | |
| marginRight: '10px', | |
| marginBottom: '10px', | |
| width: meta_opts.size+'px', | |
| height: meta_opts.size+'px' | |
| }); | |
| if (meta_opts.loading_animation){ | |
| $div.css('background','url(' + meta_opts.loading_animation + ') no-repeat center center'); | |
| } | |
| return $div; | |
| } | |
| function makeButton(text){ | |
| return $("<div/>") | |
| .addClass("pic-thumb") | |
| .width(meta_opts.size) | |
| .height(meta_opts.size) | |
| .css({borderWidth: '0px', | |
| 'float' : 'left', | |
| marginRight: '10px', | |
| marginBottom: '10px', | |
| cursor: 'pointer' | |
| }) | |
| .append($("<div/>") | |
| .html('<br/>'+text) | |
| .css({'borderStyle':'outset', | |
| 'borderWidth':'1px', | |
| 'textAlign' :'center', | |
| 'width' : (meta_opts.size - 2) + 'px', | |
| 'height' : (meta_opts.size - 2) + 'px' | |
| }) | |
| ); | |
| } | |
| if (Cache.__overview && !meta_opts.hide_back){ | |
| $album.append(makeButton(meta_opts.msg_back) | |
| .click(function(){ | |
| callbackWithInfo(meta_opts,'album_toggle',1,{}); | |
| $album.hide(); | |
| showOverview()}) | |
| ); | |
| } | |
| $this.prepend($album); | |
| if (photoCount){ | |
| for (i=0;i<photoCount && (!meta_opts.show_more || i<meta_opts.show_more);i++) { | |
| $picDiv = makeDiv(); | |
| $album.append($picDiv); | |
| albumPics.push($picDiv); | |
| } | |
| } | |
| function makeImage(i,item){ | |
| var title = item.media$group.media$description.$t || item.media$group.media$title.$t; | |
| var $div = albumPics[i] || makeDiv(); | |
| var $img = $('<img/>') | |
| .css('borderWidth','0px') | |
| .hide() | |
| .load(function(){ | |
| if (meta_opts.thumb_tuner){ | |
| meta_opts.thumb_tuner(this,item); | |
| } | |
| $img.show(); | |
| }); | |
| var thumbs = item.media$group.media$thumbnail; | |
| var gotOne = false; | |
| for (var i = 0; i<thumbs.length;i++){ | |
| if (thumbs[i].width == meta_opts.size && thumbs[i].height == meta_opts.size){ | |
| $img.attr("src", thumbs[i].url); | |
| gotOne = true; | |
| break; | |
| } | |
| } | |
| if (!gotOne){ | |
| $img.attr("alt","Sorry, no matching thumbnail found."); | |
| } | |
| var $a = $("<a/>") | |
| .attr("href",item.content.src) | |
| .attr("title",title) | |
| .append($img); | |
| $div | |
| .attr("id", meta_opts.thumb_id_prefix + item.gphoto$id.$t ) | |
| .append($a); | |
| return $div; | |
| } | |
| function renderAlbum(data){ | |
| var images = data.feed.entry; | |
| var hiddenImages = []; | |
| for (var i=0;i<images.length;i++){ | |
| var $div = makeImage(i,images[i]); | |
| if (!meta_opts.show_more || i < meta_opts.show_more){ | |
| $div.show(); | |
| } | |
| else { | |
| $div.hide(); | |
| hiddenImages.push($div); | |
| } | |
| $album.append($div); | |
| if (meta_opts.show_more && i == meta_opts.show_more){ | |
| var $moreButton = makeButton(meta_opts.msg_more); | |
| $album.append($moreButton | |
| .click(function(){ | |
| var start = 0; | |
| jQuery.each(hiddenImages,function(i,$img){ | |
| window | |
| .setTimeout( | |
| function(){ | |
| $img.fadeIn('fast'); | |
| }, | |
| 50*(start++) | |
| ); | |
| }); | |
| $moreButton.hide(); | |
| }) | |
| ); | |
| } | |
| } | |
| if ($.fn.slimbox){ | |
| $('a',$album).slimbox({},meta_opts.link_mapper); | |
| } | |
| if (meta_opts.thumb_callback){ | |
| $('a',$album).each(meta_opts.thumb_callback); | |
| } | |
| Cache[album] = $album; | |
| } | |
| authkey = ''; | |
| if (meta_opts.authkey){ | |
| authkey = '&authkey=' + meta_opts.authkey; | |
| } | |
| $.getJSON('http://picasaweb.google.com/data/feed/api/user/' | |
| + user + '/albumid/' | |
| + album + '?kind=photo&access=visible' + authkey + '&alt=json-in-script&thumbsize='+meta_opts.size+'c&imgmax=800&callback=?', | |
| renderAlbum | |
| ); | |
| }; | |
| return this.each(showOverview); | |
| }; | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment