brscPicasa jQuery plugin

1. Intro
2. Features
3. Why you should use it
4. Usage
5. Options
6. Available photo sizes
7. Demos
8. Changelog
9. TODO
10. Downloads

Intro back to top

brscPicasa is jQuery plugin that easily replaces links to Google’s Picasa Web Albums pages (user page, album page or photo page) with photos from that page. All you have to do is to copy Picasaweb link from browser address bar, put it on your page and execute brscPicasa plugin. Of course there’s plenty of options if you want to customize plugin behaviour.

Features back to top

• Very easy to use: can replace urls to Picasa page with photos on that page.
• Replaces http and https links.
• Quick: uses Google’s partial response.
• Can display both public and private photos.
• Can be easily integrated with any lightbox clone plugin thanks to callback option.
• Should work on all major browsers (tested on IE6/7/8, Firefox, Chrome, Safari, Opera).
• Released under the MIT License.

Why you should use it back to top

It’s easy to use but powerful

First of all it can be used in two ways: in link replacing mode and in standard pure options mode.

Link replacing mode is unique feature (at least I didn’t find any plugin with similar functionality) and is very easy to use. All you have to do is to put some link to Picasa picture/album/user on your page and execute brscPicasa on that link or on any of it’s parents (for instance on body element). brscPicasa will find link to Picasa page and will replace it with photos from that page. You don’t have to know any album or photo IDs, you don’t have to copy any RSS links to your albums. Just go to your Picasa picture/album/user page, copy address from browser’s address bar and put it on your page. brscPicasa will do the rest.

Standard pure options mode is standard mode known from other similar plugins: you have to specify all options and IDs (like user, album_id or album_name, picture_id) in JavaScript.

It’s quick and it minimizes use of bandwidth

Second unique feature of brscPicasa is use of partial response of Google Data Protocol. This means that brscPicasa requests only minimal amount of information from Picasa API (only what it really needs) so it works quicker and displays your photos faster. Some numbers: information about 100 pictures without partial response weights 15,6KB, brscPicasa downloads only 3,8KB thanks to partial response (that’s about 75% less).

It can display public and private photos

You can display both public and private photos in both modes. To display private photos you need to specify authkey in url (link replacing mode) or in brscPicasa settings (pure options mode).

Usage back to top

Requirements

You need to include jQuery and brscPicasa somewhere on your page:

<script type="text/javascript" src="scripts/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.brscPicasa.min.js"></script>

Link replacing mode

Insert a link to Picasa photo/album/user page on your page:

<a id="my_albums" href="http://picasaweb.google.pl/barszczmm">My public albums</a>

Execute brscPicasa on your link:

$('#my_albums').brscPicasa();

…or on any of it’s parents (remember that all links to Picasa found in this parent will be replaced):

$('body').brscPicasa({albums_titles: false});

Pure options mode

Just execute brscPicasa (with settings) on any element and pictures will be appended to that element:

$('#picasa_album').brscPicasa({
	user: 'barszczmm',
	album_name: 'Fun',
	mode: 'photos'
});

Setting default options

You can specify brscPicasa options when you are executing it on selected elements (examples above) but you can also specify default options for it. This can be useful when you want to execute brscPicasa multiple times and do not want to repeat some options all the time. Here’s how to set default options for brscPicasa:

$.fn.brscPicasa.defaults = {
	photos_thumbsize: '64c',
	photo_displaysize: '320',
	classes: {
		link_with_image: 'loaded-link'
	},
	callback: function() {
		$('a.loaded-link img', this).parent().click(function() {
			alert('some lightbox clone could be opening now');
			return false;
		});
	}
};

Options specified on execution of brscPicasa overwrite those defaults.

Available options back to top

{
link_replacer: '',
container: '',
album_list: '',
photos_list: '',
list_item: '',
single_item: '',
link_with_image: '',
photo: '',
title: ''
}

Available photo sizes back to top

Demos back to top

You can find some demos and examples here, real life example can be found on my private blog.

Changelog back to top

brscPicasa 1.0 (2010/10/06)

• First release
• Works only in browsers that support CORS

brscPicasa 1.1 (2011/05/04)

• Added support for all major browsers (not only those that support CORS)
• Replace also links with https protocol (https://picasaweb.google.com/…)
• Bug fixed: links without usefull information (http://picasaweb.google.com/) should not be replaced
• Code optimizations
• Fixed and modified demo page, added demos with Colorbox

TODO back to top

• Add options to change generated tags (span or p instead of div for example)
• Add possibility to add target attribute for generated links
• Replace also links to mobile version of Picasa Web Albums (http://picasaweb.google.com/m/photo?uname=barszczmm&id=5420781022396160258&aid=5420779723264173713&start=5)

Downloads back to top

Download latest version or browse all versions.