I needed a solution for one of my clients that I built a site for quite a while ago using plain old HTML. Johnny Frank Neilsen is a brilliant photographer residing in Denmark. I made simple gallery of thumbnail images that when you clicked on a thumbnail it gave you a larger image on it’s own page. Not only did you have to make a small and large image for each unique image and a page for each large image and a forward and back link for each page it was very difficult to move images around as you added them.
To be able to move images around is imperative for a photographer to show their new work. There are plenty of great services out there that would like you join for a monthly fee to use their databases like smugmug or zenfolio but that was way more than my client needed. He didn’t need all those services like storefronts and customer packages. He just needed a way to easily show off his work to his buyers so he could land a contracts with an agency. He didn’t want to spend hours modifying his site. He just wanted to upload the photos and get away from the computer to go take more pictures.
Picasaviewer allowed me to to do everything above and still have it look like it was part of his site and not just an embedded Google gallery. Since the look of the galleries are driven by CSS you can customize it to look like your site. It also makes use of the slimbox script (a visual clone of the lightbox script) so the photos pop-up in the same window eliminating the need to make separate HTML pages. > See the scripts in action.
How it works
- First you need a picasa account.
- Make sure to upload some photos and make sure that the photos are set to public! If you don’t this script won’t display them.
- Download all these zipped files here
- Place them in the directory will upload to your server later
- Copy the link location to the javascript and CSS files into the head of your document that will house your gallery.
- Paste the table code that has the ID of container into the body of your web page
- In the file “picasaViewer.js” find the line that starts with var and change the part after the = to your account name. For example if your picasa login is “myphotos” change it to that.
“var username = ‘accountname’;“ - Upload all your files to your web server and viola! You should have an interactive easy-to-maintain gallery that matches your exiting site!
