"
Team:TU Munich/jquery.EmbedPicasaGallery.js
From 2011.igem.org
/**************************************************************************
* 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: This little script asks picasa web for a list of albums and for a list of pictures in the album. It then emits a series of <div class="pic-thumb"/> elements containing thumbnail images. The divs are inserted inside the element marked with a particular id. Clicking on an album will display thumbnails of the images in the album and clicking on a thumbnail will show the image itself using slimbox. The script itself uses jQuery (http://www.jquery.org) and slimbox2 (http://www.digitalia.be/software/slimbox2) to work. So you have to load these two guys before loading the gallery script. You can load them in the header or the body of the document, this does not matter. <script type="text/javascript" src="js/jquery.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="js/jquery.EmbedPicasaGallery.js"></script>
Once loaded, call the picasaGallery function. This activates the code. With the id argument you tell it, where to put the gallery.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#images").EmbedPicasaGallery('oetiker',{
matcher: /./, // string or regexp to match album title
size: 72, // thumbnail size (32, 48, 64, 72, 144, 160)
msg_loading_list : 'Loading album list from PicasaWeb',
msg_back : 'back',
msg_more : 'more',
authkey : 'optional-picasa-authkey',
albumid : 'go-directly-to-this-album-ignore-matcher',
auto_open: false, //opens the first album
album_title_tag: '<h2/>',
hide_back: false, //hide the back button
thumb_id_prefix: 'pThumb_',
show_more: null, // show only the first x images when the album gets opened
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($img,entry,i){ ... $img is the img of the thumbnail, entry is the picasa image info ...}
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>
Finally inside the document, add a div tag with the id set to the name chosen above.
- /
(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 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;
title = item.media$group.media$title.$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);
})
.hover(
function () { $(this).css("cursor","pointer")},
function () { $(this).css("cursor","default")}
)
.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){
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('
'+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(){$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);
