jQuery Picasa Web Albums Gallery Plugin - Picasa Gallery

Picasa Gallery is a jQuery plugin that allows to embed your Picasa web albums into a photo gallery on your website. The demo shows us how to combine the Picasa photo gallery with jQuery fancybox plugin which provides image lightbox effects.

See also:

• jQuery Plugin For Showing Picasa/Google Plus Albums and Images - Pimax

How to use it:

1. Include the latest version of jQuery library and jQuery fancybox plugin on your web page

<link href="fancyBox/jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen" />
<link href="fancyBox/helpers/jquery.fancybox-thumbs.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="fancyBox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="fancyBox/helpers/jquery.fancybox-thumbs.js" type="text/javascript"></script>

2. Include jQuery Picasa Gallery plugin on your web page

<link href="jquery.picasagallery.css" rel="stylesheet" type="text/css" media="screen" />
<script src="jquery.picasagallery.js" type="text/javascript"></script>

3. Create a container for the Picasa photo gallery

<div class="picasagallery"></div>

4. Call the plugin with options

$('.picasagallery').picasagallery({

  // Your Picasa public username
  username: '', 

  // hidden album names
  hide_albums: ['Profile Photos', 'Scrapbook Photos', 'Instant Upload', 'Photos from posts'], 

  // true to display link to original album on Google Picasa
  link_to_picasa: false, 

  // width of album and photo thumbnails
  thumbnail_width: '160', 

  // use cropped format (square)
  thumbnail_cropped: false, 

  // title shown above album list
  title: 'Picasa Photo Gallery', 

  // true to display photos inline instead of using the fancybox plugin
  inline: false, 

  // auto open
  'auto_open': false,
  'loaded': false,

  // fancyBox settings
  'mouseWheel': false, 
  'arrows': true, // fancyBox setting
  'closeClick': false, // fancyBox setting
  'closeBtn': true // fancyBox setting

}); 

Change log:

2016-03-12

• only resize thumbnails based on thumbnail_cropped setting

---

This awesome jQuery plugin is developed by alanhamlett. For more Advanced Usages, please check the demo page or visit the official website.