Embedding Picasa Web Albums on Your Site
Google January 6th, 2007 - By Haochi
Since the day Picasa Web Albums came out, I wanted to embed the photos on my site, and I did, a while ago, by using some server-side script to parse the RSS feed PWA has. Now I have found a new (and easier) way for everyone to display their Picasa Web Albums photos on their site. All you need to do is to include these two lines in the page(s) you want the photos to be displayed on.
<script type=”text/javascript”>username = ‘your.username’; photosize=’800′;</script>
<script type=”text/javascript” src=”http://googlified.com/pwa.js“></script>
You will have to change the username’s value to whatever your PWA username is, and change the photosize’s value to the one that fits your site. (There are some restrictions on the photosize’s value, you can read more about it here) Just that easy. :)
You can find a working example here.
UPDATE: This project is now maintained Jesse Berman and is hosted on SourceForge.net. You are still welcome to contribute here though. :)
January 18th, 2007 at 7:01 pm
Seems like you can’t use 800 as the photosize. I don’t know why, but it seems like the Picasa Web Album doesn’t allow you to access a picture bigger than 400, from inside a webpage. Haven’t found a way around it yet, but am trying :D
January 19th, 2007 at 6:59 am
It’s probably the CSS problem, my blog can’t display pics larger than 500px. (sometimes)
March 2nd, 2007 at 2:35 pm
It’s because bigger than 400 picasaweb transfer it compressed so you can download it but not display it. I’ve also the same problem
March 29th, 2007 at 12:23 pm
Very impressive and easily done. What about:
1. Retrieving album & photo captions + descriptions
2. Slideshow option - is there an easy way to put it on my pages as well?
Thanks.
March 29th, 2007 at 3:10 pm
I think I can do that. When time allows me to. :)
April 3rd, 2007 at 8:29 pm
By the way, PWA is capable of displaying all the photosizes listed here.
April 4th, 2007 at 3:46 pm
For some reason, I’m unable to get this to work. I’ve copied/pasted the scripts into my webpage, changed the username value to imaginethejourneys and all I get is a blank page.
Help!
April 10th, 2007 at 2:39 pm
Thanks a lot!
Was searching this kind of thing since long!
Great Job!!!
April 13th, 2007 at 5:57 pm
I found this, and its very cool. Is there any way I can get the actual script? I’d like to tinker with it, and see if I can get it post album titles, etc.
April 13th, 2007 at 6:00 pm
Oops, of course I can. Now to see if I can uderstand it. ;) And get it to place some more info.
April 13th, 2007 at 6:09 pm
Ok, one more question. How do I get a border around the images? Mine are all slammed up against each other:
http://www.mikefrancois.net/picasa.htm
Thanks!
April 13th, 2007 at 8:09 pm
Looks like you have got it working with CSS. :)
Just in case somebody has the same question, I will post it here.
.pwimages{border: 2px none; padding: 2px;}
Adjust the numbers to your favor. :)
April 26th, 2007 at 12:11 pm
I do it have it working now, thanks; I guess IE6 doesn’t support CSS that well, as they are still slammed together in that browser, but it works in Safari, Firefox and IE7.
I can’t seem to get a picture size of 1024? it doesn’t return an image then. Also, anyway to make clicking on the photo take you to Picasa, so someone could order a print?
Thanks!
Michael
May 7th, 2007 at 10:49 am
Thanks for this. I was looking for a way to embed PWA into my site.
I would love a way to have the album title displayed on the main albums page. Looking at Picasa code, it looks like it’s somewhere in the following lines, but I can’t seem to get it to work.
Those will return the album title and info (such as # of pics, date). I’m not very adept at this, so if someone else can take a turn at it please post your results.
May 7th, 2007 at 10:51 am
Hmmm…code didn’t display.
Here’s another try:
div class=”lhcl_titlebox”>
span class=”lhcl_info”>
div class=”lhcl_info”>
Had to remove front brackets to get it to display.
May 9th, 2007 at 3:13 pm
Thanks you! With some modifications, I’ve been able to incorporate this into our website:
http://www.bostonironsidesrfc.org/gallery
We’re pulling albums directly from Picasa feeds, and have even been able to incorporate some rudimentary navigation (”next picture,” “previous picture” and so on). Now, if only the images could be loaded in a specific width, rather than 800 then scaled down. Client-side scaling sucks!!
May 9th, 2007 at 4:18 pm
Awesome Jesse.
May 9th, 2007 at 7:16 pm
Awesome job Jesse! You have accomplished exactly what I have been struggling to do for 2 days now.
Do you mind if I use/download your pwa.js file for my site?
Thanks again to all!
May 9th, 2007 at 10:09 pm
Ominx -
Go for it! The code is a bit of a mess, and there are a couple of hard-coded values in there, but hopefully you’ll be able to figure it out.
The basic idea behind the navigation is to use the album view to pass the entire array of photo id’s to the photo view (which I do in the URL, mostly because I don’t know how to do it any other way!). The photo view code then identifies where the current photo is in the array, and links the “back” arrow to the previous array element and the “next” arrow to the following array element. It’s probably not the most efficient implementation, but it works! :-)
May 9th, 2007 at 10:12 pm
Here’s the link to the pwa.js file I’m using:
http://www.bostonironsidesrfc.org/gallery/pwa.js
May 9th, 2007 at 10:14 pm
One more thing… thank you so much Haochi! This has really filled a big need for our website!
May 10th, 2007 at 1:35 pm
FYI I just cleaned up my version of the pwa.js code and added comments.
May 10th, 2007 at 8:59 pm
Jesse, thank you and great job with the comments. It really helps to know what is going on.
I have one question. I edited your js file to comment out the “view in picasa” links. I want to keep my users on my page, especially since I am showing the gallery in a popup. The only hang up I have is when I am viewing a picture in an album, when you click the picture it brings the user to the picasa website which I want to avoid mainly because it doesn’t fit in my popup and it might add confusion to my “elder” audience.
Now I have gone through and tried “trial and error” in finding where the href is and haven’t had any luck. You are clearly very good with your coding so if you can point me in the right direction I would truly appreciate it.
Thanks!
May 10th, 2007 at 11:04 pm
Ominx - all you have to do is search for the following text in the code and remove it:
<a border=0 target=PICASA href='”+photo_link+”'>
…and later in the same line, remove the </a>. Piece of cake. Hopefully, when you get this working, you’ll post a link to your album!
A couple of observations on the code, and the API in general:
It seems that, while you can grab the URLs for pictures in several different sizes, the largest size that can actually be included in your pages via the <img> tag is 800px. If you try to include anything with an imgmax greater than 800, it fails. That’s why I’m forced to import at 800px wide, then let the browser handle the scaling (yuck). A couple of the smaller widths seem to work as well, but not all of them. Hopefully Google will fix this soon!
Also, this code works for videos! The videos are treated like pictures; you can’t view them via the API, but if you click on them, you’re taken to the Picasa website where the video starts playing automatically. Pretty cool!
Jesse
May 10th, 2007 at 11:07 pm
Ominx - all you have to do is search for the following text in the code and remove it:
a border=0 target=PICASA href='”+photo_link+”'
…along with the brackets surrounding it (which I can’t type here, it messes up the post!). Also, later in the same line, remove the </a>. Piece of cake. Hopefully, when you get this working, you’ll post a link to your album!
A couple of observations on the code, and the API in general:
It seems that, while you can grab the URLs for pictures in several different sizes, the largest size that can actually be included in your pages via the <img> tag is 800px. If you try to include anything with an imgmax greater than 800, it fails. That’s why I’m forced to import at 800px wide, then let the browser handle the scaling (yuck). A couple of the smaller widths seem to work as well, but not all of them. Hopefully Google will fix this soon!
Also, this code works for videos! The videos are treated like pictures; you can’t view them via the API, but if you click on them, you’re taken to the Picasa website where the video starts playing automatically. Pretty cool!
Jesse
May 10th, 2007 at 11:08 pm
Ominx - all you have to do is search for the following text in the code and remove it:
a border=0 target=PICASA href='”+photo_link+”'
…along with the brackets surrounding it (which I can’t type here, it messes up the post!). Also, later in the same line, remove the /a (also surrounded by brackets). That’s it, piece of cake. Hopefully, when you get this working, you’ll post a link to your album!
A couple of observations on the code, and the API in general:
It seems that, while you can grab the URLs for pictures in several different sizes, the largest size that can actually be included in your pages via the img tag is 800px. If you try to include anything with an imgmax greater than 800, it fails. That’s why I’m forced to import at 800px wide, then let the browser handle the scaling (yuck). A couple of the smaller widths seem to work as well, but not all of them. Hopefully Google will fix this soon!
Also, this code works for videos! The videos are treated like pictures; you can’t view them via the API, but if you click on them, you’re taken to the Picasa website where the video starts playing automatically. Pretty cool!
Jesse
May 10th, 2007 at 11:10 pm
Ominx - all you have to do is search for the following text in the code (on line 212) and remove it:
a border=0 target=PICASA href=’”+photo_link+”‘
…along with the brackets surrounding it (which I can’t type here, it messes up the post!). Also, later in the same line, remove the /a (also surrounded by brackets, which you should remove as well). That’s it, piece of cake. Hopefully, when you get this working, you’ll post a link to your album!
A couple of observations on the code, and the API in general:
It seems that, while you can grab the URLs for pictures in several different sizes, the largest size that can actually be included in your pages via the img tag is 800px. If you try to include anything with an imgmax greater than 800, it fails. That’s why I’m forced to import at 800px wide, then let the browser handle the scaling (yuck). A couple of the smaller widths seem to work as well, but not all of them. Hopefully Google will fix this soon!
Also, this code works for videos! The videos are treated like pictures; you can’t view them via the API, but if you click on them, you’re taken to the Picasa website where the video starts playing automatically. Pretty cool!
Jesse
May 10th, 2007 at 11:28 pm
I can see how that last post could be confusing, with all the missing brackets, etc. So I’ve posted an alternate version of the code, with all of the links to Picasa removed:
http://www.bostonironsidesrfc.org/gallery/pwa-no-picasa-links.js
In this version, clicking on the image will not take you to Picasa. I’ve also removed the “view in Picasa” links for you. :-)
May 11th, 2007 at 10:18 am
Jesse, I really appreciate you taking the time providing me with that edited js file. My site is in its infancy stages but you can take a look at what little is there at the moment here: http://www.towncenteratwantage.com
Thanks again.
May 12th, 2007 at 1:28 am
Looks great! Did you have any trouble adapting the code so that it works on your site?
May 14th, 2007 at 11:06 am
Thanks Jesse, as I said it’s a work in progress…just like the job itself. Getting your script was fairly simple to integrate. It was simply a matter of changing some url references and such. You really did all the hard work and I appreciate that.
May 21st, 2007 at 10:15 am
This was just what I was looking for! Its ace well done mate.
One problem though is that links display like:
/?albumid=1234556789
instead of with the calling file in front like:
/index.php?albumid=1234556789
Any ideas of how can fix this, or do I just hack the js and put the file before the question mark?
May 22nd, 2007 at 9:53 am
John: I’m no expert at this, but I believe the link references whatever called the current page. That is, if the link to your gallery is http://www.whatever.net/gallery/index.php, the URLs will look like /index.php?albumid=123456789. If the link is http://www.whatever.net/gallery, they’ll look like /albumid?=123456789. I tinkered around with the javascript and can’t find an easy way to grab the actual URL, rather than the referred URL. I suppose you could hack the javascript to insert the index.php manually, but in my experience it works either way (at least on our server).
May 22nd, 2007 at 3:40 pm
I’ve integrated the original PicasaWebAlbum Slideshow. You can see it at my page, then click on “Bilder”. When you see the foto alone, you can click on Slideshow and see the original Slideshow.
May 22nd, 2007 at 3:42 pm
MaikD - very cool!
May 22nd, 2007 at 3:44 pm
Thx :-)
May 22nd, 2007 at 3:46 pm
But, another problem. I want to integrate the Web-Album-DATE, like the other old Pictures under the Picasa WebAlbum. Has anyone an idea ?
May 22nd, 2007 at 4:59 pm
The official Google PWA API only allow you to get the published/updated time of the photo, not the time of when the photo was taken…
So, to get the time when the photo was published, add the follow line to wherever you like under the photo function to show the published date. (change published to updated if you want the updated date)
$(”<p>”+j.entry.published.$t.slice(0,10)+”</p>”);
May 23rd, 2007 at 12:14 am
Thx a lot ! It works!
May 23rd, 2007 at 2:00 pm
Thanks to everyone who has been contributing to this script (especially Haochi) - this is exactly what I’ve been looking for. I’ve taken Jesse’s update script & made some changes to it.
The most important are changes to the HTML output and the ability to request an album by album name. For the HTML output, I use floats & other semantic markup instead of tables, so the number of photos per line will adjust according to the size of the window. And since Google gives the option of requesting an album by album name or by albumid, you can either pass in “?album=[album_name]” or “?albumid=[album_id]“. It makes it more human readable and aesthetically pleasing… Note that, when requesting a photo, you still must pass in the albumid. Other changes I’ve made are minor cosmetic changes, some of them being specific to my website (http://www.talynkevin.com).
Now I plan on integrating the slideshow & photo dates. Thanks, guys!
May 23rd, 2007 at 2:03 pm
By the way, to access my photos, you can go to http://www.talynkevin.com and click on “Photos” or go to http://photos.talynkevin.com.
May 23rd, 2007 at 2:39 pm
@elchinitotwo
I see how you want to resize the photo using PHP. Instead of writing the PHP code in a JS file (which will not work under normal condition), you can create a new PHP file that would resize the photo you request and return the resized photo. (ex. http://www.talynkevin.com/resize.php?photo=picasawebphoto)
Well, if it involves server-side script, that’s no point of using this. :)
May 23rd, 2007 at 3:11 pm
Actually, the commented PHP code in my picasa.js file (along with all of the commented code) is from Jesse’s version of the file. I just haven’t taken the time to clean it up yet.
June 1st, 2007 at 10:45 pm
WOW… so awesome! Thank You, Thank You, Thank You!
website i’m working on…
http://www.thepowerplace.org/thepowerplace-05-ph.php
I’m trying to get these sized right… I’ve tried to change all the max sizes but it doesn’t work.
The Town advantage site looks great… are they reducing the picture size before uploading to picasa?
June 7th, 2007 at 8:22 am
has anyone figured out how to change the size of the thumbnails? Great work everybody.
June 7th, 2007 at 12:04 pm
To change the thumbnail sizes, search “imgmax=160″ and change to one of the available dimensions. (see post above)
June 15th, 2007 at 10:26 am
Has anyone written a script to display comments for each picture and allow adding new comments? Thanks.
June 19th, 2007 at 6:10 am
Hello everyone, since my early reply I see new great stuff around here. I wonder if elchinitotwo can share with us the amazing flash slideshow?
Thanks.
June 19th, 2007 at 6:26 am
mmm… just noticed that the slideshow comes from Google…
June 19th, 2007 at 9:11 am
Yes, the slideshow is simply embedded and linked to Picasa. If you go to one of your Picasa albums when you’re logged in, there’s a link that shows you how to embed a slideshow on your webpage. Note that, in addition to the size, you can display captions and specify the background color (default: black).
June 27th, 2007 at 3:06 am
Hi,
does anyone know, whats happened with the script since tonight ? It does not show any photo …
June 27th, 2007 at 3:41 am
seem google changed something :-(
hoping for an update of the script.
June 27th, 2007 at 8:54 am
It looks like Google made some changes, I will look into that later. Stay tune.
June 27th, 2007 at 10:52 am
Like others have mentioned, Google changed some stuff. I use my own modified version of your javascript. I found a kludge that will _sometimes_ works for _some_ albums. I changed:
var img_end = j.feed.entry[i].summary.$t.indexOf(’?imgmax’);
to
var img_end = j.feed.entry[i].summary.$t.indexOf(’.jpg”‘);
This is obviously an awful and imperfect fix (potentially catastrophically bad), but for those who can’t wait for a real fix . . . . :-)
June 27th, 2007 at 11:02 am
Hi,
var img_end = j.feed.entry[i].summary.$t.indexOf(’.jpg”‘);
does not change anything, but with
var img_end = j.feed.entry[i].summary.$t.indexOf(’.jpg‘);
now you can see the top pictures. The pictures from the album are still unavailable :-(
June 27th, 2007 at 11:03 am
Would it make sense to use the “api” projection instead of the “base” projection? I’m thinking of what Google wrote on their gdata page. Then one wouldn’t need to search through the string text. I remember trying to do this a long time ago, but I came up against a problem. I don’t remember what that problem was, though.
June 27th, 2007 at 11:10 am
I haven’t had too much time to poke around, but from what I’ve seen, you could change all instances (there should be three) of
indexOf(’?imgmax’);
to
indexOf(’” alt=”’);
I have noticed that the thumbnails in the album & viewing a picture individually display at a different size than before. I’ll have to play around with this tonight.
June 27th, 2007 at 11:18 am
I had it working great (useing Jesse’s version), but it broke recently. And now that I look at your examples I think google changed something and your script doesn’t work anymore. I would try and fix it myself but i am not that good a programmer.
Thanks for a great product. Let me know if you get it working again.
June 27th, 2007 at 12:34 pm
The ?imgmax parameter appears to no longer be used. Instead, a /s288 is in the URL which is dictating the size. The parameter comes just prior to the name of the file, as in below:
s288/070402_1083.JPG
It appears valid sizes include /s288, /s144, /s400 and /s800
June 27th, 2007 at 12:52 pm
Instead of using the following (or similar) code:
var img_begin = j.feed.entry[i].summary.$t.indexOf(’src=”‘)+5;
var img_end = j.feed.entry[i].summary.$t.indexOf(’” alt=”‘);
var img_base = j.feed.entry[i].summary.$t.slice(img_begin, img_end);
the more reliable method seems to be:
var img_base = j.feed.entry[i].media$group.media$content[0].url;
to get the image source. Beerman, you’re right when you say that /s288 can be used, but the imgmax parameter still works - however, the former will take precedence over the latter. For example:
http://lh4.google.com/talynkevin/RUGIqW2tABI/AAAAAAAAAAo/_ERfhjJ5YZU/s288/IMG_1942.JPG - gets 288px image
http://lh4.google.com/talynkevin/RUGIqW2tABI/AAAAAAAAAAo/_ERfhjJ5YZU/IMG_1942.JPG?imgmax=800 - gets 800px image
http://lh4.google.com/talynkevin/RUGIqW2tABI/AAAAAAAAAAo/_ERfhjJ5YZU/s288/IMG_1942.JPG?imgmax=800 - gets 288px image
If you use the method I mentioned to get the img_base var, you will not get /s288 (or /s144, etc.) in the path. You will then be able to use the imgmax parameter as before.
I hope this makes sense. Let me know if there are any problems with this. I won’t be able to fully test this until later.
June 27th, 2007 at 1:17 pm
elchinitotwo:
Great work!! Based on that post I’ve been able to fix the script reliably… and it’s easy, just three lines to change.
The following line appears in the code exactly twice:
var img_base = j.feed.entry[i].summary.$t.slice(img_begin, img_end);
Replace each occurrence with the following:
var img_base = j.feed.entry[i].media$group.media$content[0].url;
Also, the following line appears exactly once:
var img_base = j.entry.summary.$t.slice(img_begin, img_end);
Replace it with this:
var img_base = j.entry.media$group.media$content[0].url;
That should get you back up and running. If you like, you can go back and remoev the img_begin and img_end lines immediately preceding these changes, but it isn’t stictly necessary. Thanks again, elchinitotwo… great diagnosis and fix of the problem! ;-)
June 27th, 2007 at 1:42 pm
Thank you Jesse and elchinitotwo !
now it works perfectly …
June 27th, 2007 at 5:47 pm
Glad it’s working for you! FYI I’ve updated the scripts on my website, so anyone who happens upon this thread now won’t have to go back and make this change. If you’ve already installed the script, though, you will need to make the change detailed in post #61 in order for it to start working again.
June 27th, 2007 at 8:59 pm
Thanks Jesse, script works great. Just wondering though, what if Google changes stuff again. How can we protect our sites from changes to the feed structure. Should the other pieces of the script be modified to use the media$group object?
June 27th, 2007 at 9:27 pm
Ray: possibly. I’d have to look at it more closely. There are a few places in the script that “slice” information out of URLs that are returned in the XML — it’s one of those URLs that changed, breaking the script — but I’m not sure if there even are corresponding analogues in the media object for those URLs. We might very well be stuck with using the summary object. Besides, one would imagine that, in the future, Google is just as likely to change something in the media object as in the summary object… so it might not be any better to switch over to the media object entirely.
In any case, it’s not difficult to update the code, in case Google changes something again. As long as the information is available somewhere in their schema, it’s retrievable.
June 28th, 2007 at 12:19 am
I agree with Ray that we should use the media group object and other native elements in the feed structure as much as possible. However, I also agree with Jesse that there are many pieces of information that we are interested in that are not contained in this structure (eg. album & photo ids). For these, we would have to just parse the data.
I’m going to go through the script to figure out how to make it better and so that it will last through more modifications Google makes to their feeds…
June 28th, 2007 at 8:41 am
Sorry guys, been quite busy lately, didn’t have time to revise the script. (Didn’t even get a chance to look at the new format they have, though I am aware of the update from their blog)
June 28th, 2007 at 4:14 pm
elchinitotwo:
This is sort of uncharted territory for me. Is the media group object somehow more reliable, in general, than the other objects? Just trying to learn this as I go along :-)
Thanks, Jesse
June 29th, 2007 at 12:08 am
I guess we’re talking about parsing one object to get the image url vs. using the object designed to hold that url. So when Google changed the format of the summary object that we had been parsing, the script broke - if we had been using the media group object, the script wouldn’t have been affected.
June 29th, 2007 at 9:11 am
Hey Jesse,
Thanx a bunch, works like a charm again.
Didn’t want to think about customizing my scripts again when a new release was to be published. Mine looks like this
http://www.jdee.nl/static.php?page=photogallery
Cheers all
July 5th, 2007 at 10:07 pm
I just added a new feature to the script: Now, when viewing individual photos, you can use the left and right arrow keys (on the keyboard) to go to the previous and next photos in the album, respectively. Thus it acts just like the Picasaweb albums. ;-)
To add this code to an existing implementation of pwa.js, find the following line of code (near the bottom, line 250 or so):
$("<br><center><div style='margin-left:2px'>"+j.entry.media$group.media$description.$t+"</div></center></p>");… and add the following line immediately after that (all on one line):
$('<script language="Javascript"> document.onkeydown = function() { if (event.keyCode == 37) { window.location = "' + prev +'" } if (event.keyCode == 39) { window.location = "' + next +'" } } </script>');
That’s it. Enjoy!
July 5th, 2007 at 10:13 pm
I just added a new feature to the script: Now, when viewing individual photos, you can use the left and right arrow keys (on the keyboard) to go to the previous and next photos in the album, respectively. Thus it acts just like the Picasaweb albums. ;-)
To add this code to an existing implementation of pwa.js, find the following line of code (near the bottom, line 250 or so):
$("<br><center><div style='margin-left:2px'>"+j.entry.media$group.media$description.$t+"</div></center></p>");
… and add the following line immediately after that (all on one line):
$('<script language="Javascript"> document.onkeydown = function() { if (event.keyCode == 37) { window.location = "' + prev +'" } if (event.keyCode == 39) { window.location = "' + next +'" } } </script>');
That’s it. Enjoy!
July 6th, 2007 at 12:24 am
I’m having trouble posting this for some reason. Hope it works this time!
I’ve added arrow key support to the script. Now, when viewing a photo, pressing left arrow on your keyboard goes to the previous photo, and pressing right arrow goes to the next photo. Here’s how to modify your own pwa.js file. Find the line where this text appears (it should only appear once):
entry.media$group.media$description.$t
Then, add the following line of code immediately following that line:
$('[script language="Javascript"] function testKeyCode( evt, intKeyCode ) { if ( window.createPopup ) return evt.keyCode == intKeyCode; else return evt.which == intKeyCode; } document.onkeydown = function ( evt ) { if ( evt == null ) evt = event; if ( testKeyCode( evt, 37 ) ) { window.location =”' + prev + '”; return false; } if ( testKeyCode( evt, 39 ) ) { window.location=”' + next + '”; return false; } } [/script]');
And, as usual, wherever you see a [ ] above (in the script tags), replace with with curly brackets. (This wiki won’t let you type curly brackets without affecting the output.)
Anyway, this new feature works in both IE and Firefox. Enjoy!
July 6th, 2007 at 12:25 am
Having trouble posting… have added a cool new feature… hope I can post it soon!
July 6th, 2007 at 12:28 am
I’m having trouble posting this for some reason. Hope it works this time!
I’ve added arrow key support to the script. Now, when viewing a photo, pressing left arrow on your keyboard goes to the previous photo, and pressing right arrow goes to the next photo. Here’s how to modify your own pwa.js file. Find the line where this text appears (it should only appear once):
entry.media$group.media$description.$t
Then, add the following line of code immediately following that line:
$(’<script language=”Javascript”> function testKeyCode( evt, intKeyCode ) { if ( window.createPopup ) return evt.keyCode == intKeyCode; else return evt.which == intKeyCode; } document.onkeydown = function ( evt ) { if ( evt == null ) evt = event; if ( testKeyCode( evt, 37 ) ) { window.location = “‘ + prev + ‘”; return false; } if ( testKeyCode( evt, 39 ) ) { window.location = “‘ + next + ‘”; return false; } } </script>’);
You’ll have to replace the curly quotes with straig quotes, as well… be careful about double-quote and single-quotes though! (This wiki makes quotes curly, which sucks for displaying code…)
Anyway, this new feature works in both IE and Firefox. Enjoy!
July 6th, 2007 at 3:23 am
Hi Jesse,
this is realy a very good feature. Thank You !
MaikD
July 6th, 2007 at 8:26 am
I am of the brazil, wanted to know as to recoup the information with characters special and the date in the native format, dd/mm/yyyy, I tried to use hl=pt_BR but it did not function! Somebody can help me?
July 6th, 2007 at 12:34 pm
Paulo -
I don’t know much about localizations. What error are you getting?
July 6th, 2007 at 12:45 pm
Errors below:
Comment in my website “Marco Aurélio e Aloisio”
Comment in my picasaweb album “Marco Aurélio e Aloisio”
Date in my website “2007-01-30″
Date in my picasaweb album “30/01/2007″
My website = http://www.lobosdapiedade.com/galeria.php
My picasaweb = http://picasaweb.google.com.br/lobosdapiedade
July 6th, 2007 at 1:22 pm
You’re right… I just tried with several different languages and none of them seem to work. Maybe Google isn’t finished with the localization work in the API yet? Sorry, don’t know what else to tell ya… except that if you keep the hl=pt_BR argument in there, maybe it’ll work eventually…..
July 6th, 2007 at 11:56 pm
Paulo - This is a real long shot, but maybe you can specify a different ISO encoding in the page that calls pwa.js. In other words, at the top of http://www.lobosdapiedade.com/galeria.php you could put the following inside the <head> tags:
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
Edit: Oops, looks like you’ve done that already. Oh well, I’m at a loss. Sorry… :-(
July 9th, 2007 at 5:54 pm
Anyone else notice that the script has stopped working? The link to the ‘working example’ above doesn’t work, and neither does the link on my site. Any thoughts/info?
Thanks,
Mike Francois
http://www.mdf.net
http://www.mikefrancois.net
July 9th, 2007 at 6:11 pm
Michael - still working fine for me. Google changed their feed structure a couple of weeks ago, so you will need to modify the code. See post 61 above.
July 9th, 2007 at 6:43 pm
Jesse, Thanks a bunch! I read through the threads, and found your very excellent take over of the script. I guess its been broken for a couple of weeks, but it is all working now. You’ve really improved this thing a great deal!
You can see my photos at http://www.mikefrancois.net . Just select ‘FreshPix’ at the top to see the gallery with your updated script. I did a little tweaking of font sizes, since some of my gallery names were long, and it was throwing off the alignment of things.
Cheers!
Mike Francois
http://www.mdf.net
http://www.mikefrancois.net
July 9th, 2007 at 7:30 pm
I found one issue with the new script. If an album name has an apostraphe in it, it fails to load an individual image. Check out any album I have (like “Eileen’s Birthday”), and you will see you get it up front, and you can get the thumbnails, but when you drill down to a photo, the link gets cut off and it fails (at least in IE7).
FYI
Mike
http://www.mikefrancois.net
http://www.mdf.net
—
IE8->IE7, edited by Haochi :)
July 9th, 2007 at 7:31 pm
I mean IE7. ;)
July 9th, 2007 at 11:06 pm
Mike - that sounds like an easy fix. I’ll look into it.
July 9th, 2007 at 11:45 pm
OK, all fixed. Javascript didn’t like the fact that there was an apostrophe in the URL containing the album name, so I replaced it with the HTML literal equivalent, %27. Just three quick changes to the code:
Find the following (it only appears once):
galleryname={”+j.feed.title.$t
and replace it with this:
galleryname={”+j.feed.title.$t.replace(”‘”,”%27″)
Next, there are two places in the code where the following appears (they happen to be in two consecutive lines):
galleryname=” + my_galleryname
Replace both instances with this:
galleryname=” + my_galleryname.replace(”‘”,”%27″)
… and that should do it. As always, all of the apostrophes and quotes in the above code should be STRAIGHT quotes… this blog is automatically making some of them curly. I’ve updated the scripts on my website, so anyone doing a fresh implementation doesn’t need to make these changes; only existing copies need this fix. Incidentally, apostrophes in the photo captions seem to be working fine (probably because they’re not being passed in any URLs).
Nice catch, by the way! :-)
Jesse
July 10th, 2007 at 2:10 am
Thanks to Haochi for getting all of this started, and to Jesse for the excellent work and speedy replies!. ;)
Mike
http://www.mdf.net
http://www.mikefrancois.net
July 10th, 2007 at 3:26 am
I was having the hardest time with the ” ‘ ” substitution, but I finally got it to work. ;) Thanks all!
July 10th, 2007 at 3:39 am
Ok, I found another one, and I’m sure its quite similar, but I’m to tired to try to figure it out. In this case, I have an album of my honeymoon, named “Kauai, Hawai”. It looks like something is getting into an infinite loop, as the URL gets to large:
Request-URI Too Large
The requested URL’s length exceeds the capacity limit for this server.
request failed: URI too long
Click on any photo in this gallery to see it happen:
http://www.mikefrancois.net/picasa.htm?albumid=5044478898417726497
If you look at the URL in the address bar, you can see where it is looping the same data over and over.
I was going to fix it by removing the comma from the album name, but I thought I’d leave it broken so you can see what the deal is.
Anyway, that seems like the last bug I can find with my gallery. I checked my ampersand gallery names, and they all work great.
Again, thanks for the code!
July 10th, 2007 at 2:13 pm
Hmmm… I think I know what’s going on here, and I’m not sure there’s an easy fix. The comma’s not the issue (I use commas in my gallery names and they work fine). The basic problem is that the script can’t handle a gallery with as many pictures as yours (431). I took a look at the URL; it’s over 2000 characters long, but there’s no looping. If you examine it closely, you’ll see that each photo ID is, in fact, unique. But the URL cuts off at character #2055; in fact, it only contains data for about 108 photos. If it wasn’t truncated, it would be almost 9000 characters long!
The reason that the URL needs to be so long is because of the navigation arrows in the photo view. In order to be able to navigate to the “next” and “previous” pictures in the album, the current photo must be aware of what the ID numbers of those photos are. But on moving to the next photo, you need to know what that photo’s next and previous photo IDs are, and so on. So, to allow you to scroll through the whole album, this requires passing the ENTIRE list of photo IDs to each photo, which makes the URL really long. Too long, apparenly. :-( Because each photo ID is a 19-digit number, with a URL limit of 2056 characters (on your server, anyway), that limits us to 2056/19 = (about) 108 pictures per album. When you factor in overhead in the URL, like the album and site names, the limit is closer to 100 photos. Of course, the maximum URL length may be configurable from server to server; I really don’t know much about that. If you can make it larger than your current limit (2055 characters, I think), you’d be OK.
I can think of a few of other, more general solutions, but they’re not easy to implement. The first would be to put the photo list in a cookie. I was trying to prevent requiring cookies to use this script, but I guess if it’s necessary I could look into it. I think that would be the easiest solution. Alternatively, if the current photo is a multiple of 100, we could force a jump back to the “thumbnails” page so it could grab the next set of 100 IDs - that way the URL would never get too long. Or, finally, we could detect the size of the gallery, and if it’s over 100 photos, simply disable the navigation arrows.
So what I would recommend, for now, is to break your Hawaii photos into 5 separate galleries (part 1, part 2, etc), each with 100 photos or less. In the meantime, I (and undoubtedly others) will mull over the problem and see if we can come up with a better solution.
(Also, I’ll work on keeping my responses more succint; hopefully next time I can do better.)
Jesse
July 10th, 2007 at 9:15 pm
Thanks for the reply. I see what you’re saying. I guess I could cut the album size down; I don’t think I can increase that value. I have another album with 157 photos (http://www.mikefrancois.net/picasa.htm?albumid=4984690397287219217), so I think the number is a bit larger than 108. I will see if I can get away with 150.
Thanks,
Mike
July 11th, 2007 at 4:01 am
Okay, I have something of a workaround for you. It’s not perfect, but at least it will get your larger albums displaying properly.
The only way I could figure out how to do this was to disable the the navigation arrows in the picture view, but I was able to do it only for albums which are so large they would exceed the URL length limitation (over 100 photos or so). Smaller albums will still let you navigate using the arrows.
There’s only three changes, but the code is rather dense, so rather than post the code changes in this blog (and have to deal with all the curly quotes again), I’ve written a little “how-to” document. Here it is:
http://www.bostonironsidesrfc.org/gallery/pwa_long_url_fix.txt
Again, this is only for people who have existing implementations with galleries over 100 photos. New setups can copy the code from my site and it’ll work fine.
Please let me know if this works for you…
Jesse
July 15th, 2007 at 9:39 pm
I love this script - thanks. But one problem - some gallerys give me the error below b/c the URL is too long…
414 Request-URI Too Large
from : http://thelarster.com/staging/googletest.html?albumid=4944752733842898961&photoid=4944752990815256594&
galleryname={MK}&np=132&prev=4944752964662591506&next=4944753028052942866&photoids=4944752772115070994,
4944752812468076562,4944752851360415762,4944752892804399122,4944752930474885138, … etc…
Any ideas on how to avoid this? I posted this in the Google Groups and they said to use the Get instead of Post or something to that affect.
Thanks!
—
URL edited (it breaks my backend) - Haochi :)
July 15th, 2007 at 10:21 pm
Larry - see my most recent comment, #94, just above yours. It’s a workaround… while it’s true that a POST would be preferable (as there is no URL length limit, as opposed to a GET), I haven’t figured out how to do that just yet. Not sure it’s even possible in this case.
Where in Google Groups did you post? Can you post the link here? I may ask for help over in that group… thanks.
July 16th, 2007 at 6:05 am
Jesse,
That worked, thanks! Here’s my link to the GoogleGroups question about the same….
http://groups.google.com/group/Google-Picasa-Data-API/browse_frm/thread/4e86eb1af0dcf767?hl=en
July 16th, 2007 at 8:10 pm
Good news! Based on the info in the GoogleGroups thread that Larry posted, I’ve been able to figure out a way to eliminate the extremely long URLs. Instead of passing along the entire list of photos in each album as part of the URL, the script now queries back to Picasa to get the previous and next photo each time you load a new photo… there’s no need to pass around the list of photo IDs in each album anymore. So now, extremely long URLs like this one:
http://www.mikefrancois.net/picasa.htm?albumid=5052971499394568801&photoid=5052971576703980162&galleryname={Temecula}&np=73&prev=5052971538049274482&next=5052971606768751250&
photoids=5052971538049274482,5052971576703980162,5052971606768751250,5052971645423456930,
5052971666898293426,5052971701258031810,5052971731322802898,5052971752797639394,
5052971778567443186,5052971800042279682,5052971838696985362,505297187735169104,
5052971907416462130,5052971941776200514,5052971971840971602,5052972001905742690,
5052972031970513778,5052972066330252162,5052972100689990546,5052972130754761634, etc etc…
… are shortened to the much more reasonable
http://www.mikefrancois.net/picasa.htm?albumid=5052971499394568801&photoid=5052971576703980162&galleryname={Temecula}&np=73&prev=5052971538049274482&next=5052971606768751250
And the best part is that, no matter how large the album gets, the URL won’t get any bigger than this! Those “URI too long” errors are now, hopefully, a thing of the past. The navigation arrows will now also work for any size album (not just albums under a certain size).
The changes to the Javascript were… um… significant. Too numerous to post the changes here. So if you have large albums (more than 100 pictures or so), I would recommend that you re-get the code from my site (http://www.bostonironsidesrfc.org/gallery/pwa.js) and redo any style changes you may have done before. New implementations, as always, are fine.
Please let me know if you have any trouble with the retooled script.
Jesse
July 16th, 2007 at 10:22 pm
Reloaded script and that worked - Woo Hoo!
July 18th, 2007 at 1:06 am
Larry - glad to hear it.
I’m in the process of setting up a SourceForce project to aid in the distribution and versioning of the code. (Haochi, since this script was your idea to begin with, please let me know if you have any objection to this… thanks!)
July 18th, 2007 at 9:23 am
No problem, go ahead. :)
July 18th, 2007 at 11:37 pm
Great, thanks! I’ve submitted my SourceForge project request.
Another quick update: no functional changes, but extending the technique in post #98, I’ve compressed the URL format even more. I think it’s as far as it’s going to go. Individual photos now have a URL with the following structure:
http://www.yoursite.com/gallery.php?albumid=album id #]&photoid=[photo id #]
…and that’s it. I’ve stripped out everything else, including the next and previous photo ID numbers, the count of photos in the album, and the album name. There definitely won’t be any more “URI too long” errors now. :-) I’ve also put some usage information in the comments near the top of the code, and generally improved the comments throughout the script.
Updated code here: http://www.bostonironsidesrfc.org/gallery/pwa.js
July 20th, 2007 at 12:49 am
Just a note that they have added a couple of really cool new features to the API today. I will post more about this tomorrow. :)
link: http://googledataapis.blogspot.com/…new-api-features.html
July 23rd, 2007 at 12:31 pm
The SourceForge project is up:
http://sourceforge.net/projects/pwa
I’ve posted one small update in the version there. Now, you can specify how many columns of photos you’d like without having to go in and tweak the JavaScript. The calling syntax is now <script type=”text/javascript”>username = ‘your.username’; photosize=’800? columns=’4′;</script>
…where “columns” is the number of columns you’d like. Default is 4, but any positive integer will work.
July 31st, 2007 at 8:47 pm
Hi Jesse,
Love to see a lot of progress here!
In the meantime I also worked on my version of script to enhance it. Just posted an article on my blog about it at http://www.jdee.nl
I see you’ve fixed the long URL thinghy, I added paging to the album itself so I would never encounter it.
Love your work, maybe we can team up to make it the best of breed.
I see you are still using the BASE feed, I switched to API feed, and also added Exif details on the photo page.
Love to hear your comments.
Regards,
Jaydee
August 1st, 2007 at 10:15 pm
Nice work, Jaydee! I actually came across your site a few days ago while I was searching for other implementations of pwa.js. The paging is neat; doesn’t really fit the bill for our site but it would be nice to add it in as an optional switch. Also, I thought I switched it over to the API feed a few weeks ago (when the original script broke) but I guess I missed it… thanks for pointing that out!
I’ll look over your version of the script when I get a moment; with any luck we can grab the best of both.
By the way, the long URL is fixed by dumping all the photo numbers into an array rather than passing it as part of the URL… it’s pretty well commented in the code…..
Jesse
August 2nd, 2007 at 5:22 am
Hi, great work on the pwa. I was wondering how can you get the comments as well into the webpage. Also is there any way to run the slideshow on the webpage itself in a frame without using php.
August 2nd, 2007 at 5:48 am
Hi Amit,
Yes, you could get the comments, but I’ll leave that for now since I don’t use the comments bit of Picasaweb.
I added a link to the slideshow and made use of Greybox for opening a window inside my gallery to show the slideshow.
Take a look at my Photo Gallery v2 in one of my albums at http://www.jdee.nl for an example and click below the album description on “View as Slideshow” to see how I did it.
You would have to include the necessary Greybox script inside your page too (from http://orangoo.com/labs/GreyBox/)
August 2nd, 2007 at 4:54 pm
Thanks Jaydee for your prompt reply and suggestions. I will try this out and let you know how it goes. Also, would you be able to let me know where I could find some information on getting the comments info since I plan of having that as an integral part of the website.
Regards,
Amit
August 2nd, 2007 at 5:09 pm
Amit -
My version of the code displays the comments. The location in the media collection is media$group.media$description.$t
HTH
August 3rd, 2007 at 12:54 am
Hi Jesse,
Thanks for your reply. But if i’m not mistaken media$group.media$description.$t is for getting the image caption. I was looking for the code that would get the comments any user makes along with the username of the person making the comments.
Best Regards,
Amit
August 5th, 2007 at 5:17 pm
Hi, im using the JS on my homepage. And it really rocks. Thanks.
I do have one small problem though, some special danish characters is not shown correct in Internet Explorer. Firefox show the characters just fine. Its the characters “æøå-ÆØÅ” which you can find on this page: http://transam.loot.dk/galleri.html - If you look in Internet Explorer you will see: # 101 - Mikkel Ø
Where in Firefox you will see # 101 - Mikkel Ø
Also all the comments where letters æøå is in, is screwed. Is there a work around?
Sincerly, Andy
August 5th, 2007 at 5:30 pm
Hi Andy,
You could do a replace with javascript.
Wrap a function around the txt fields that might contain non entity characters with a script like the one given here:
http://www.thescripts.com/forum/post299513-4.html
Will require some editing of the pwa.js though.
Regards,
JD (http://www.jdee.nl)
August 5th, 2007 at 5:36 pm
So.. all I need to do it, put all that extra JS into the current JS and all is good? Or will I need to wrap some specific code around some tags? I can edit the JS no problem, but im not quite sure where, and how :)
Suggestions?
August 6th, 2007 at 4:13 am
surround items with replaceExtChars() like: j.feed.entry[i].title.$t
(on line 98 of your js/picasa.js) would become:
replaceExtChars(j.feed.entry[i].title.$t)
The same goes for:
163: j.feed.title.$t
204: j.entry.title.$t
If I’m missing some, I’m sure you can figure it out this way.
Goodluck!
August 6th, 2007 at 4:03 pm
I tried my best, but I can’t make it happen. Anyone want to help me over googltalk? :)
August 23rd, 2007 at 1:50 pm
Hi Jesse…
Thanks for this script! It is just awesome! I have a quick question though… Is there anyway to specify to just show one specific album I have in my PWA account? I don’t want people visiting my site to see all my albums.
Thanks,
Jerry
August 23rd, 2007 at 2:23 pm
Jerry - Yes, there is a way. You will need to hack the picasaweb() function a bit though. You should add the following as the first line inside the for loop:
if (j.feed.entry[i].title.$t == "Your Album Name”) {
… and don’t forget to add a } at the end of the for loop as well. Then only the album with that name will be displayed; the others will be ignored. Note that this may mess up the table structure a bit; you may have to play around with the table, tr and td tags (also defined in the picasaweb function) to get it to display correctly.
Hope this helps! Jesse
August 23rd, 2007 at 2:25 pm
Actually, the table structure should be OK as long as you set the columns=1 in the page that calls the script.
August 23rd, 2007 at 10:16 pm
Jesse,
Thanks for the info, but is there any way you can tell me exactly where it goes? I don’t know the java script lingo, but I am pretty good with computers and html.
August 23rd, 2007 at 10:57 pm
Also when I click on the actual album and it takes me to the pics and I click on a pic to make it bigger it will now show. Any ideas? Here is the page that I am making for my sister.
http://www.successoriesandgifts.com/baby.htm
Thanks,
Jerry
August 23rd, 2007 at 11:40 pm
Ok disregard the last post I just found out that I had the wrong size.
August 26th, 2007 at 10:22 pm
Jesse,
I have one last question. I really would like to have the comments under the pictures? Can you tell me what I need to put in the file and exactly where do I put it.
Thanks,
Jerry
August 27th, 2007 at 1:17 am
Jerry -
Looks like you have it working, for the most part. If by “comments” you mean the photo description, it should already be displayed (see the example here). If you mean comments that other users make about your photos… haven’t gotten a chance to implement that yet. Eventually it may be available as an option.
As for only displaying one particular album in your collection, look for first time this line of code appears in your copy of pwa.js:
for(i=0;i<j.feed.entry.length;i++){
… and on the next line, add the following:
if (j.feed.entry[i].title.$t == "Your Album Name") {
Of course, substitute the name of the album you want to display. Then go down a few lines and add an extra } after where it says $("</tr></table>");
Then you should be all set. One more thing, though - if the formatting seems screwed up after you do this, it may help to edit your gallery.htm file so that it says columns='1' instead of columns='3' when you reference the pwa.js file from there (down near the bottom of your code).
HTH…
August 27th, 2007 at 1:19 am
Jerry -
Looks like you have it working, for the most part. If by “comments” you mean the photo description, it should already be displayed (see the example here). If you mean comments that other users make about your photos… haven’t gotten a chance to implement that yet. Eventually it may be available as an option.
As for only displaying one particular album in your collection, look for first time this line of code appears in your copy of pwa.js:
for(i=0;i<j.feed.entry.length;i++){
… and on the next line, add the following:
if (j.feed.entry[i].title.$t == "Your Album Name") {
Of course, substitute the name of the album you want to display. Then go down a few lines and add an extra } after where it says $("</tr></table>");
Then you should be all set. One more thing, though - if the formatting seems screwed up after you do this, it may help to edit your gallery.htm file so that it says columns=1 instead of columns=3 when you reference the pwa.js file from there (down near the bottom of your page).
HTH…
August 27th, 2007 at 7:57 am
Jesse,
Thanks for the info. Yes I ment photo description. But is there any way of putting the description in the album? Before you click on the picture to make it big? Underneath the thumbnails in the album?
What I mean is that if they could show up under the small pics on this page…
http://www.bostonironsidesrfc.org/gallery.php?albumid=5061911071846903665
Jerry
August 27th, 2007 at 1:18 pm
Jerry - search for the line that begins with the following (straight quotes, not curlies):
$("<td valign=top><a href=’"+link_url+"’>
.. and replace that entire line with the following 3 lines (remember to use straight quotes instead of the curly quotes):
$("<td valign=top><a href=’"+link_url+"’><img src=’"+img_base+"?imgmax=160&crop=1′ class=’pwimages’ /></a>");
$("<br><center>"+j.feed.entry[i].media$group.media$description.$t+"</center>");
$("</td>");
The second line is the key here. If you remove it or comment it out, the description will vanish and it will look just like it did before the change.
Jesse
August 27th, 2007 at 5:34 pm
Jesse,
Thank you! That worked great! You are the man!!
Jerry
August 27th, 2007 at 6:04 pm
Anyway to adjust the font size on the description? I would like to make it smaller.
August 27th, 2007 at 6:17 pm
Glad the photo description worked for you.
Font sizing is inherited from the style of the page that calls the script. You should really read up on CSS. Try Googling it, or check out this page for a quick primer on font-specific elements: http://www.tizag.com/cssT/font.php
Jesse
August 28th, 2007 at 12:58 pm
FYI, the “quick and dirty” way to do this is to add a SPAN tag. In other words, replace this line in pwa.js:
$("<br><center>"+j.feed.entry[i].media$group.media$description.$t+"</center>");
with this line:
$("<p><center><SPAN STYLE=’font-size: 9px’>"+j.feed.entry[i].media$group.media$description.$t+"</span></center>");
Remember to use straight quotes, and substitute whatever number you want (8px, 10px, 12px) for the font size you want. You have many, many other formatting options available to you as well. All this is covered in any basic CSS tutorial.
Jesse
September 19th, 2007 at 4:06 pm
I’ve been playing with all your code and most work great.. What I’m attempting to do is remove the file names which seem to appear when using the no picasa script. any Ideas?
September 19th, 2007 at 4:16 pm
TommyG -
On line 229 of the no-picasa script, delete everything between <br> and </center>, inclusive, so that the new line looks like this:
$(”</p>”);
September 19th, 2007 at 4:23 pm
Thank you Jesse, However it still shows filename of image and the images are not even appearing anymore. Any clue?
September 19th, 2007 at 4:25 pm
I haven’t looked at that version of the script for a long time. Let me check into it.
September 19th, 2007 at 4:27 pm
It Appears to have been working earlier, let me also delete from host and reload it, maybe there is internal error.
September 19th, 2007 at 4:30 pm
Okay. FYI I just confirmed that the change I posted is correct. You might want to make sure you are editing the correct line? Also, this script is just churning out HTML so editing it to make any customizations for your own website should be pretty straightforward….
September 19th, 2007 at 4:34 pm
Essentially you want to remove the bit where it spits out j.entry.media$group.media$description.$t - in many cases, that is the filename, although it can also be overwritten with a real description.
September 20th, 2007 at 9:23 am
Does anyone have an idea, why i can’t see big pictures in IE but in Mozilla on my page ? I think there’s a problem with the Spaces in the Albumname.
Any Idea ?
September 20th, 2007 at 1:10 pm
MaikD - just looked at your page - you appear to be using an old version of the script. This problem has since been fixed. Please get the latest version of the code from http://sourceforge.net/projects/pwa …
Thanks, Jesse
October 1st, 2007 at 8:32 am
Hi,
Now I use the script from Jaydee. Now all albums still work. Thank you for your support. The script is really 1a!
MaikD
October 22nd, 2007 at 7:30 pm
Is there anyway to get the title of the album to wrap under the picture? I.E., I have a long album name, and when it tries to place that under the thumbnail for the album, it doesn’t all fit, and this throws off the album spacing.
You can see this at http://www.mikefrancois.net
I reduced the font size, but I’d rather it wrap the title, and then increase the space between thumbnails.
Anyway, thanks to everyone for a great script!
Mike Francois
November 11th, 2007 at 8:45 am
2 questions…
1. Can you change the order the albums are in? Not the pics, but the albums.
2. My CSS file for my site has some attributes for links which works through the whole site except the links for the pics used in this .js file. Any idea why? (the still show the default blue as a link around them)
Thanks!
November 13th, 2007 at 4:50 am
Hey works grea but i have one question. How to add in the album list like this
NAME of album (number of pics)
date of publish
Thank you
November 13th, 2007 at 4:57 am
Hey, look at my Site , then klick on “Bilder”. If you think, this is what you mean, then you can get my code here.
Good Luck !
MaikD
November 13th, 2007 at 6:56 am
thank makid
How I can make such a nice slideshow as you have
November 13th, 2007 at 7:26 am
Hi,
the Slideshow is the Picasa-Webalbum-Slideshow direct from Google. The Sideshow runs in a Greybox. But you can read all this things in the Script Code. Test it!
Pfiat Di
MaikD
November 13th, 2007 at 8:01 am
thank makid. works great
November 22nd, 2007 at 4:34 am
Awesome script - really perfect! Thank you so much guys!
I was curious though, how would I get the previous and next images as thumbnails and allow the user to click them instead of a generic arrow to go forward and back? My skills aren’t quite up to it! Help?
November 22nd, 2007 at 11:59 am
MaikD, would be nice to see you credit the authors of the script (original author Haochi and the extenders of it, Jesse and ofcourse myself from which you got your adapted version), other then that, thx for the support everyone is giving to this project.
I’ve been working on a non-page-refresh version including caching to overcome the sometimes a bit to slow responses of the data feeds (no image caching, would take to much storage).
Hope to here from all what you think about it, will release the code as soon as I think it’s good enough to release without getting embarrassed. View here http://www.jdee.nl/
Keep up the good work all… and Jesse, still going strong on the sourceforge release?
November 22nd, 2007 at 12:32 pm
Hi JD,
you’re right, i will write some text as credit in the script. Your new project is very cool, i hope, it finish soon!
Thanks
MaikD
December 10th, 2007 at 9:29 am
Hi,
has anyona an idea, how to change the thumbsize from the albumlist ? Now the Thumbs are 160px*160px, when I change the attribut “thumbsize” to 64 nothing will be done. Any Hints ?
MaikD
December 11th, 2007 at 3:11 pm
Hi there,
Trying to include the pwa.js, followed the instructions but a click from the thumbnail brings me to the main page of the site.
This happens because of a tiny php inlcude script:
$_SESSION['page'] = $_REQUEST['page'].$_REQUEST['sub'].$_SESSION['slogan'].”.php”;
include($_SESSION['page']);
since pwa.js is not giving anything for the requests it brings me to the main page cause of “if empty then main”
Is there a way to change my little php script so that I can make use of this beautifull picasa include?
thanks! @q
December 20th, 2007 at 5:50 pm
Does anyone got the thumbsize issue fixed? Is it really possible to have the thumbnails smaller than 160px ?
Thanks in advance …
December 27th, 2007 at 11:49 am
But if you unfortunely have got a dot(.) in your name, such as ‘benchao.yu’, nothing will appear in your website(just blank!).
What can I do, then?
January 21st, 2008 at 9:08 am
Hi Jesse thanks for the great code I’ve been so liberal to use your code and create a joomla component with it. If any one is interrested ill put it on the net. You can see it in action overhere
http://www.kakatoe.net/index.php?option=com_picaweb&Itemid=96
January 30th, 2008 at 9:56 pm
Google has changed something, the code doesn’t work anymore for displaying individual photos. Anyone know why?
January 30th, 2008 at 11:09 pm
What fcuk … this is what happen when you live depending of someone. The code is amazing, no doubt, but google messed with this great solution. Thank you all …
January 31st, 2008 at 12:21 am
Okay, I have a fix. Do a search for the following text in pwa.js, and where it appears, delete it (only one occurrance, down near the bottom):
&np='+_GET['np']+'&galleryname='+_GET['galleryname']+'
Sorry about that!
Jesse
January 31st, 2008 at 12:27 am
Okay, I have a fix. Do a search for the following text in pwa.js, and where it appears, delete it (only one occurrance, down near the bottom):
&np=’+_GET['np']+’&galleryname=’+_GET['galleryname']+’
Remember to change the curly quotes to straight quotes. I’ve also updated the code in the SourceForge repository.
Sorry about that! -Jesse
January 31st, 2008 at 5:35 am
Thanks for the quick fix Jesse. Great work!
So, did Google deprecate Galleryname in the json call? I don’t quite get what they changed.
January 31st, 2008 at 10:38 am
Thanks!
Now it works fine again ! What exactly google changed ?
Cu
MaikD
January 31st, 2008 at 4:38 pm
I had been passing some extra information (album name, number of photos in the album) that their API used to allow; it would just ignore the extra info. Now they are apparently more strict about sticking to the format when making calls to their API. No big deal; I didn’t really need the extra information in order to make it work. (It took a while to figure out what was wrong, though!)
Jesse
February 1st, 2008 at 3:06 pm
Yeah, I was trying to debug as well, and couldn’t figure out what they changed. Do they not have release notes when they make changes to their APIs? It seems pretty irresponsible of Google to change APIs on the fly without proper communication.
February 1st, 2008 at 3:53 pm
I don’t see this latest action as a change in API… it’s more like a locking down of the information that you can and can’t pass into it. The pwa.js script was sending extra information that was not recognized by the API; instead of ignoring it as it did before, the API now rejects the request. Not unreasonable, really.
Google documents any changes here: http://code.google.com/apis/picasaweb/gdata.html. The API been pretty stable for a while now, actually… and when you think about it, it’s pretty amazing that this resource is available to us as all. :-)
February 1st, 2008 at 6:29 pm
Agreed.
I love Google, I think some day they will take over the world. I can’t wait for that day. ;-)
Thanks Jesse.
February 10th, 2008 at 10:26 pm
Hi Jesse
Great script. I been looking for something like that a long time now. I don’t have much experiance with JS. I tired your script. It work fine but only one problem when you go to the level where only one picture of an album is going to be displayed. It doesn’t display nothing. Again as i said i haven’t a clue of JS so i can troubleshoot it. I red previous comments and it says you have fixed the script but it is still not working for me. i can email you a copy of the PWA.JS i am using if you don’t mind rectifying the problem for me. If you can then please forward your email address.
regards…
Adeel
February 10th, 2008 at 10:34 pm
Adeel - please download and install the latest version of the script from this link (at Sourceforge):
http://internap.dl.sourceforge.net/sourceforge/pwa/pwa.js
If you are still having trouble, please post the link to your site and I can take a look.
Thanks, Jesse
February 11th, 2008 at 1:56 am
Adeel,
As mentioned before in an email, I’ll place the solution to your problem here or others to learn from in case they have a similar problem.
Problem: Photo not showing
Cause: Album title contains a quote
Solution: Rename your album in Picasa and remove the quote from the title.
Long term solution: We should probably make the pwa.js escape any quotes in album titles correctly.
Regards,
JDee
February 11th, 2008 at 10:57 am
JDee or Adeel - I would really need to see an example of this, because I’ve tested the script on my albums with both single and double quotes (in both the album titles and photo captions) and both are working fine for me.
Thanks, Jesse
February 11th, 2008 at 11:25 am
hi Jesse
Thanks for your email. I did more searches on internet and came across a site http://www.jdee.nl/scripts/pwa2.js. Now this version is working perfectly for me with too much extra information from the album. Try it on. But thanks again Jesse. You been a great help.
Regards…
Adi
February 12th, 2008 at 10:04 pm
Hello,
I really don’t want to publish my pics in public mode. There’s a way to embed my albums as private? The user will need the password to login (i will provide it) or - better - the password will be somewhere in the code.
Sorry, I am totally new in js.
February 12th, 2008 at 10:26 pm
ALX, I took a quick look at authentication in the Picasa API and it seems pretty complicated. I’m not able to take on this scope of project. If someone else wants to give it a go, good luck! It appears to involve sending a request to the AuthSub interface, which requires the user to log in and then it gives you a token to use in all further requests. More info here. Sorry I can’t be of more help with this.
March 8th, 2008 at 8:59 am
Folks I wrapped the GREAT pwa.js with a Joomla component and it’s now online and you can find it at my site http://www.pageworks.nl for anyone to download
March 21st, 2008 at 5:39 am
Since today, there are no thumbs inside the album.
http://www.maikd.de -> Bilder -> Choose any Album - there are no thumbs.
The same problem I see at JDee and the others. Any Hint ?
March 21st, 2008 at 7:47 pm
Can you rearrange the order of the albums???
March 22nd, 2008 at 4:52 am
Yes, you can. You’re going into your Picasa-Webalbum an change the date of the Album.
March 22nd, 2008 at 1:09 pm
On this topic of adding Picasa pictures to your own domain, I just wanted to share what I have done with the site http://www.brazilpictures.net
As you can see explained on the ‘about’ page of that site, I am using the Picasa Data API and Ajax to build most of the functionality of the site. Please see the details there and let me know if you have any suggestions.
March 23rd, 2008 at 2:08 am
Wow ! This is fine !
March 25th, 2008 at 12:43 pm
@MaikD - looks like your thumbnails are working again. Any idea what the problem was?
@M. Martins - very innovative! I really like how you integrate the keywords. Have you considered packaging up the source for a public release?
March 25th, 2008 at 12:56 pm
There was a problem at google. Since Saturday all is ok again.
April 7th, 2008 at 7:55 pm
My gallery all of a sudden stopped working for some reason. When you click on a photo to view it… its just blank, no photo shows.
I created a special page with no css or anything so none of my website is conflicting with the following example:
http://brentrussell.com/gallery.html
I am using this version of the js file given thanks to Jesse:
http://brentrussell.com/includes/pwa.js
Anyone tell me what is going on?
April 7th, 2008 at 7:58 pm
Never mind. I was using an older version. Thanks guys
http://www.bostonironsidesrfc.org/gallery/pwa-no-picasa-links.js
April 8th, 2008 at 11:27 am
@Brent: Yup, the old code broke on January 30 and I posted a fix on January 31. :-) Just a reminder: If anyone else has problems, you should redownload the script from SourceForge: http://sourceforge.net/projects/pwa/.
May 10th, 2008 at 9:49 am
Jesse, thanks for all your work on this… I am a new user downloading the script today and plan on using it extensively. I appreciate you keeping it up to.
May 15th, 2008 at 10:36 am
Thank you so much for this! I have been searching online for weeks for a simple, clean looking gallery that uses Picasa Web Albums! This is the perfect solution!! It’s great because once it is setup, someone with very minor computer knowledge can maintain it!! I’m helping a local neighborhood association “update” their website, but they don’t really have any computer knowledge at all.
Check it out:
http://cardinallake.com/Photos/tabid/120/Default.aspx
May 18th, 2008 at 3:07 am
Has anyone attempted to enabled PicLens with this script? I am not making much progress…
June 11th, 2008 at 8:04 am
thanks for this great script. I’ve modded it a little bit. I am using this in a page url that contains params in the url. therefore i’ve added a function:
http://www.11tmr.com/11tmr.nsf/d6plinks/MWHE-695L9Z
now it is working on pages containing url’s like:
content.php?pageid=3024&category=main
June 30th, 2008 at 4:52 am
Hello,
Thank you very much to all of you for the information about picasa web album and keeping this website. It has really helped with my website.
I have a question:
I was wondering if we could the same for Youtube? ..To embended in our website, like picasaweb.
Any feedback will be appreciated.
Thank you very much.
Victor
June 30th, 2008 at 6:59 am
Piclens you say, it is all there see my site
June 30th, 2008 at 7:00 am
Piclens you say, it is all there see my site http://www.pageworks.nl
July 14th, 2008 at 12:48 pm
Thanks a bunch! This was so easy to do compared to the other embedded photo galleries out there.
July 26th, 2008 at 12:31 pm
I use the integrator in my website: http://www.svenvanbrabant.be/picasa.php
I have set up the script that the width of the single pictures is 512px (example with a horizontal picture).
I have several pictures on my Picasa that are vertical. However, when I watch them on my website, the pictures are stretched, and consequently the displayed vertical pictures have a bad quality (example with a vertical picture).
What must I add in the PWA script so that the vertical pictures have a maximum height of 512px?
July 26th, 2008 at 5:44 pm
Hi Jesse, great script. I have installed on a Wordpress blog, within a page which is a sub-page of a page, so resulting url is like mysite.com/portfolio/photos/… — a directory which doesn’t actually exist. So I put the next, prev and home images in the directory with the script (which I think is what the instruction says do), but it’s looking for them in this non-directory directory.
I can manually change the image paths in the script, but is there a better way for me to get the images right?
I am using the 1/2008 update version. Right now I’m working on a local install on Windows, in case that would make a difference.
Thanks for all your work on this, and thanks in advance for any help for this issue.
September 4th, 2008 at 5:35 pm
GREAT SCRIPT!
Problem: Everything works when I use a pwa.js off someone else’s server (e.g. links posted earlier). When trying my own local pwa.js on my website, the gallery doesn’t seem to work, I just get a blank page. My first suspicion… is there something wrong with the text formatting when I initially grab the pwa.js?
2nd question: How do I start into an album on first load? I don’t want my visitors seeing other albums.
September 4th, 2008 at 5:39 pm
1. Check your permissions. The directory you put the pwa.js script in must be world-readable.
2. Depends on your album names, but you can just link into the pwa.js script with an argument that describes what album you want to view. For example, to view one of the albums on my site directly without looking at all the others, the link would be this:
http://www.bostonironsidesrfc.org/gallery.php?albumid=5183356852217770897
September 9th, 2008 at 6:20 am
i’m sorry, maybe i’m missing something… but isn’t this javascript giving out loud and clear the account informations for managing the picasa album?
doesn’t seem that much safe to me…
September 23rd, 2008 at 9:11 am
Great script. I been using it since Feb 08. The only thing i can’t figure out is, How i can display the web album sorted date wise. as if i upload a picture on 2nd of Oct 2008 it should display before the picture i uploaded on the 1st of Oct 2008. Can anybody help me with this.
October 21st, 2008 at 12:40 pm
This is really a great stuff! I’m loving it the way it is but I needed it to modify a bit and can’t get it working. May be Jesse or someone may help. I just want to show pictures in a particular album directly. Meaning that, I do not want to see the list of albums.
So when it’s done it would be like 1. List of Photos and then 2. A particular photo (when clicked).
I tried a comment album list and hardcoding the album name in album list (by passing album name from main page like we do for userid and size) but couldn’t achieve it. I appreciate your help if this is something that can easily be done.
:-)
October 21st, 2008 at 1:29 pm
@Vindizzy: i’m using the script too, still at testing, gotta retouch some stuff. By the way i’ve implemented a way to make categories. My photographer friend that needs this has only to upload albums with names like nature_albumtitle or macro_albumtitle, i parse the “macro_” or “nature_” and print just these albums. This is done adding the parameter in the page with the username.
just put a conditional if (albumtitle = [argument]) { print } in the for { } that outputs the album.
Maybe is possible to go straight to the thumbs of a particular album, but i should check better the script.
October 21st, 2008 at 2:25 pm
@blackdog: i managed to display a particular album using the logic you mentioned. below is the code which i put it in ‘for loop’ of album listing.
if (album_name_picasa.toLowerCase() == alb_nm.toLowerCase()) {}
alb_nm is a new variable i have passed from main page and i do require it to convert it to lowercase.
i’m still trying to get a way to display photo thumbnails from an album. thanks for the help. i appreciate it.
cheers.
December 22nd, 2008 at 7:47 pm
Hi Guys
Just a quick question, has anyone of you guys tried to see video true PWA? since Picasa webalbum let you show video it would bee great to have this feature in PWA
Thangs to all of you who made this possible
Cheers David
December 23rd, 2008 at 1:23 pm
Yeah, i got th same problem. You can check my modified JS here: http://www.crc-tuning.it/Tuning.htm for having categories from a PWA; but the owner of the site has the same problem: a referred video uploaded in the PWA IS NOT available for watching.
Wanted to post the same but didn’t had time.
January 7th, 2009 at 11:16 am
I cannot use the Joomla component on my site because my server does not allow the component script to run for more than 10 seconds. However, there seems to be a way to update this script here to make it point to the correct Joomla string. Right now, clicking on an album sends me to my main page because the link does not include the Joomla string. Does anyone know where and how to update this script to make it work on Joomla?
January 7th, 2009 at 11:29 am
What if you make an HTML module instead of appending in the component area?
January 7th, 2009 at 11:33 am
This is far above my skills… ;)
February 19th, 2009 at 10:16 pm
hi! do you know how to increase the length of slideshow in embedding to other sites? like for example, i want it to run for 5 seconds so that my captions can be readable.