Notes

Embedding Pictures from Google+ using jQuery

Posted by Dan on Saturday the 17th of December, 2011

Currently the Google+ API doesn't allow access to a users photo albums and images, however it is possible to access your images stored on Google+ using the Picasa web albums data API

I have written a simple jQuery plugin to get pictures from an album and display them in a simular style and effect to the albums on Google+, you can see a demo of this here and on the front page of my site you can view the jQuery plugin on github.

Install & Setup

Make sure you have at least jQuery 1.4.2.

Download the plugin from here and include the css and js file as below:

1
2
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="pluspics.js"></script>

Run the following script to setup and run the gallery plugin.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script type="text/javascript">
$(document).ready(function(){
	$('#container-id').plusPics({
		userId: 'your_user_id',
		albumId: 'your_album_id',
		numImages: 3,
		title: 'Images'
	});
});
</script>

Put an empty container div on the page where you want the gallery to display.

1
<div id="container-id"></div>

Posted in: jQuery