jQGallery examples page

(all examples are carefully selected from my personal holiday pictures...)

TOC

  1. Picasa: single photos
  2. Picasa: whole albums
  3. Picasa: album teasers
  4. twitpic
jQGallery generally only supports public albums, but why not make them public if you are going to share them anyways?

Picasa: single photos

the picasaPhoto() function renders adds an image to the current element that displays the photo thumbnail surrounded by an anchor tag that links to the actual image.

single photo /w default values:

jQGallery uses data-* attributes to gather information about what photo to display, this makes for very simple Javascript code when calling the plugin, while still providing a lot of flexibility. The best way to find those IDs is to click on the "RSS"-link in your picasa web albums pages, look for urls like this one: 
    https://picasaweb.google.com/data/entry/base/user/108363071077152262865/albumid/5679796410312675457/photoid/5679796436624162050

single photo /w several options set:

please see jQGallery.js for possible options, also please note the use of the callback option to implement a fancybox gallery:

Picasa: whole albums

For albums you don't need to specify the data-photoid attribute. The picasaAlbum() function calls the callback function passed as a parameter in the options map once per album, passing the element it was called upon. Because of the way jQuery handles the calls on selector return values we need to employ a little hack in order to be able to have a working fancybox()-gallery: we need to set a css-class on the anchor element and then select elements with this class. Because fancybox uses the "rel" attribute to group images into galleries jQGallery will automagically chose a rel that's unique for a picasa album.
This even works across multiple picasa albums:

Picasa: album teasers

Each Picasa photo album has a teaser image, and jQGallery's picasaTeaser() function provides an easy way to access it:
... and just because a common use-case for such an image is to create a gallery from it, jQGallery has the picasaTeaserGallery() function. It renders an anchor element around the teaser image and also renders an empty anchor for each photo in that album:

the picasaUserGalleries() function does the same thing, just for all of the user's galleries:

Twitpic

Twitpic's api is kinda limited, but at least you can use the twitpicMedia() function to display a single image:
... and the twitpicUserGallery() function to display a user's gallery. If you want to create a fancybox gallery remember to set the type to "iframe", as twitpic's EULA demands that you link to the image page instead of the image directly: