PicasaViewer: embed a picasa gallery in your site
February 5, 2009
Abstract
For a small community website, the need rose to share pictures with each other. A clever mind created a picasa-gallery, which was working OK. But, to view the gallery you had to leave the community website. The idea to embed the gallery was born. I went looking for existing scripts but could not find the exact thing I needed. So, there it was: picasaViewer 1.0.
Features
- embed a public picasa gallery in your website
- view photo’s using slimbox
Usage
Just include the needed CSS and javascript files, and edit picasaViewer.js to suit your situation.
Feel free to check out the demo-page: picasaViewer.
Downloads
To use this script you need
- MooTools 1.2 (could have guessed that one)
- slimbox by Christophe Beyls
- Browser.extras byAaron Newton
- My extension on Browser.Extras
- a picasa gallery
- the picasaViewer.js script
Download the whole package here if you just want to unpack and get started.
Fantastic script!! But isn’t it possible (maybe for you next release of picasaviewer
) that private albums are also show. In this case you can make all your picasawebalbums private, make a login page on your site and people can watch your pics without showing the pics in the original picasawebalbum. It know it can be done (true API), unfortunatly my php skills are not that good. The guy on this website did succeed but your script is mutch more beautiful. Maybe his site can help you out. http://smccandl.net/?q=node/1
Thanks and greetz!
Awesome script. I have a question. I was looking at your demo and it seems like when you click on a thumbnail of an album, it does not load the picture, but it does on another album. I also tried it on my own and it does not load pictures, it just leaves you hanging with the image loader on the page. I am sure this has to be something small but do you know why this happens?
Hi vhelsing, I see what you mean. Some pictures were working though (at least over here). I fixed the script, seems to work now. Let me know if it’s working for you.
I tried it on the site but it looks like there is a problem with the image sizes from Picasa Web Albums. It shows fine for some and not for others. Check out this link, it shows everything fine except for the last image (which has a different width). Do you know why this happens? Thanks for the reply.
Web page:
http://www.natalielittlefield.com/gallery2.html?&albumid=5314574418393176113
Picasa Web Album page:
http://picasaweb.google.com/natalielittlefield09/TestAlbum#
It does work with your demo code though. I assume you changed something in the PicasaViewer js file. I copied it from your demo and it worked. Thanks.
hi vhelsing, i encountered same problem as lennart yesterday.
And just download your modified version from
“Download the whole package here if you just want to unpack and get started.”
However, the result was same. I suffered from same problem.
pls give me some advice . thx
sorry , title should be to Lennart
now is ok . thx your contribution. thx very much ^^
Hi km_lau, I forgot to update the whole package. I just updated it with the last fixes. Thnx for using the script and leaving a comment.
hey, Lennart, Can I show the album order by upload date ?
I mean the latest created album should place at first.
Thx very much !
Hi – love the script excellent work. When I get to the end of an album, the slimbox still displays Next and the loader spins and spins. In your example it knows when there are no more photos, and only the Close button is available. Any ideas on how to troubleshoot or where that detection is controlled? Thank you!
Hi amos, I would start by looking at the slimbox-script, or at the generated html. See if the last image you view is the last image present in the source code. Success!
Hi – I just stumbled across this script and it works flawlessly! Thank you very much for releasing something so useful. I just have one questions regarding how the script interacts with videos loaded on Picasa. I uploaded a small video to my Picasa account and when the script roams over it, it grabs the first frame and then treats it as a image rather than a video. Do you think it would be possible to embed a video into the same scheme of the slideshow? Just curious about this, because it would be very cool and useful.
Thanks!
The script works great but I wanted to integrate it into my website and the Lightbox wants to be applied to every image on the page. Please see here: http://www.cspack15.org/gallery_main.html?&albumid=5359224708163307249
How can I get it so that Lightbox only applies to the images within the gallery and not my navigation?
Thanks so much for your hard work in developing a truly useful and impressive way to share photos via Picasa!
I’m using your script for http://kendylart.com/paintings/
Is there a way to embed a specific album? I’ve looked through the script and haven’t figured out how to link to one album rather than all of them… I’m fine to hard code it –
Thanks again!
Hello Lennart, your script seems to be just what I need. The problem is : I can’t work with Javascript. I tried to include the Javascript and CSS to my page like this:
…but nothing appears on my webpage. Can you tell me what I exactly have to do to include the Javascript and CSS files? What do I have to change in picasaViewer.js? (For example where do I have to write my username?)
Thanks a lot!!
sorry, the html codes I tried to put in my message didn’t appear
I inserted the CSS files with the element link rel=stylesheet type=text/CSS href=css/filename.css
and the Javascript files with the element script type=text/javascript src=js/filename.js
Hi Lennart. Picasa Albums have an optional Description field. How can the album descriptions be pulled into the tops of album pages, like here for example: http://tinyurl.com/ozo25k ? Thanks!!
I’ve been away for a while and forgot to respond to some comments. So, better late than never:
@uiucphoenix:
You need to change the first part of line 78 ( $$(“a”) ). Now every a-element is selected. If you change it to $(‘photos’).getElements(‘a’), only the images in the album should be selected.
@whershfeld
You can hardcode an album by changing line 30 to
var url = ‘http://picasaweb.google.com/data/feed/base/user/’+ username +’/albumid/’+ <> +’?category=photo&alt=json&callback=viewPhotoList&thumbsize=’ + thumbsize +’&imgmax=’+imgmax
Make sure you change <> to the correct album id.
@gaetanlamaille
Try installing Firebug in Firefox and see where your browser tries to find the files.
@amos
A bit of a guess: the description is probably located in item.description.$t (check that please), so you can change line 66 to something like “var title = item.title.$t + item.description.$t;
My attempt to pull the description didn’t work
Any direction you could provide on how this can be accomplished will be a significant enhancement and greatly appreciated!! Please consider developing and sharing. Best, thanks + thank you for everything we don’t thank you enough for!!