Hot on HuffPost Tech:

See More Stories
Engadget for the iPhone: download the app now
AOL Tech

How to add an awesome Picasa or Flickr slideshow to your website

Yoxview

Picasa is awesome. The way that it integrates with Web Albums is very convenient, and the process of selecting your best images and uploading them to an online album is extremely polished. However, when the time comes to share this album with your friends, you might want to show them something a bit more personalized than a generic Picasa Web Albums link. If you are a professional or aspiring photographer, this becomes even more relevant when it comes to your portfolio.

Sure, you could always get a SmugMug account, but isn't there some way to do it for free? Wouldn't it be great if you could use your own Web page, but pull the images right from Google's super-fast Picasa servers?

A while ago, I covered YoxView, which is a great Javascript image gallery. It has a lightbox-style image viewer that morphs to fit the size of your image (even if the image is larger than the browser window, YoxView reduces its size so you never have to scroll). It features very nice animations, and most importantly, stays out of your way. The controls you see in the screenshot above are only shown when you direct your mouse over that area of the image; otherwise, all you see is just your image, with no branding and no buttons.

YoxView has recently been updated, and now features fairly easy to use plugins for pulling images directly from Picasa and Flickr. I put it to the test with an unlisted album featuring my cats, Ivan and Marie. You can see the result, as well as detailed step-by-step instructions, after the fold.
Ivan and Marie

You can get to the actual gallery by clicking on the screenshot above. Try playing around with it.

Here's what to do to set up such a gallery on your own site:

1. Download YoxView.
2.
Unzip it to a folder on your hard drive.
3.
Edit the file yoxview-init.js and uncomment the last line, which says LoadScript(_yoxviewPath + "yoxview-nojquery.js"); . This needs to be done in order to allow the gallery to work stand-alone, and not as a jQuery plug-in. If you're not sure what that means, that's okay -- just uncomment the line and continue.
4.
Upload the YoxView folder onto your web server. Make sure it's in a path everyone can access (e.g, somewhere in your www subfolder).
5.
In a text editor, create a new, blank, HTML file. This will be the page that you will be using for this slideshow. You can also integrate the slideshow into an existing page, but for this tutorial, I will assume that you are creating a page from scratch (like the one that I created).
6.
Now comes the trickiest part, which is integrating the script into your page and specifying its parameters. Copy and paste the following text into your new document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YOUR GALLERY TITLE HERE</title>
<!-- your stylesheet below, but only if you have one. I used gallery.css -->
<link rel=StyleSheet href="gallery.css" TYPE="text/css" MEDIA=screen>

<!-- You need to specify the path to Yoxview below. I just put it in a "yoxview" subfolder. -->
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#yoxview_picasa").yoxview(
{
displayImageTitleByDefault: false

},
{
dataSource: 'picasa',
dataSourceOptions: {
user: 'your picasa username here',
album: 'your album name here',
authkey: 'the authkey here (for unlisted albums)',
thumbnailsMaxSize: 250,
setTitle:false
}
}
);
});
</script>
</head>

I know this can be hard to read, so here's a screenshot of what it looks like in my editor with syntax highlighting, and the real data that I used for the album:



To get your Picasa username and the album name that you will need to use, just point your browser to the album that you wish to share. The address bar would then say something like this:

http://picasaweb.google.com/zukerman1/090910IvanAndMarie?authkey=Gv1sRgCK7bvP2o0JWzqgE#

The bold part contains all of the parameters that you need:

  • User: that is zukerman1 above.
  • Album: That is 090910IvanAndMarie above (note there is no question mark there)
  • Authkey: This appears only for "unlisted" albums. It is Gv1sRgCK7bvP2o0JWzqgE above. Note that you lose the # at the end.

If, for some reason, the code above doesn't work for you, you can go to the YoxView website and copy the code from there.

7. We will next tell YoxView where to place the images within our document. We don't have anything in the document, so this will be quite simple. Copy and paste:

<body>
<h1>ALBUM TITLE</h1>
<div id="yoxview_picasa"></div>
</body>
</html>

This is what it looks like with highlighting:



8. Upload the file onto your server, and try accessing the page from your web browser. It should work at this point. If it doesn't, the main things that could go wrong are:

a) You might not have included YoxView correctly; make sure that the script loads and runs. You can do it using Firebug or any other Javascript console -- just make sure it loads and runs.

b) You might have entered the parameters incorrectly. Try copy/pasting the sample code from the gallery I made by going to the page, viewing page source, and copy/pasting it into your document. If you can see my cats, you only need to replace the parameters with those of your Picasa username and album.

9. Now that you've set the album up, it's time to get fancy. You can include any other HTML in the page, and use any of YoxView's numerous built-in options (scroll down to "Plugin options") to tweak its behavior. If you know a bit of CSS, the possibilities really are vast. YoxView's developer also tells me he's hard at work on the next version, which should feature an advanced inline gallery for blogs and other goodies.

10. Did it work? Tell us in the comments! Also, if you find any mistakes above, do let me know.
Share StumbleUpon.com

Tags: ajax, css, gallery, javascript, photography, picasa, pictures, webdesign

Comments

8