Facebook Plunges Again
Tumblr 101: Tips And Tricks To Get Started
How to add an awesome Picasa or Flickr slideshow to your website
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.
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.
Comments
8
Subscribe to commentsmazzthepianomanApr 8th 2010 1:20PM
Looks nice but does appears to not render properly on IE6/7. Also there is no graceful degradation for users that might have JavaScript turned off for security/job purposes.
Personally I have been using Slimbox 2, a lightweight, accessable, cross-browser supported clone of LightBox.
http://www.digitalia.be/software/slimbox2
mazzthepianomanApr 8th 2010 1:35PM
Odd, YoxView claims cross-browser support but the example here just does not come up in IE6 (MultipleIE install) and IE7 (recently did a clean install of XP Pro on my system with no changes to IE settings, all updates applied except IE8). I have yet to try IE8 since I keep that off of this particular computer due to a conflict with ProTools.
Erez ZukermanApr 8th 2010 6:42PM
I had an extra trailing comma in the code... Sorry. Fixed -- should work on IE now as well.
RobertApr 8th 2010 1:46PM
What editor were you using with the slick syntax highlighting?
Erez ZukermanApr 8th 2010 6:43PM
Jedit :) It rocks indeed.
yoxigenApr 8th 2010 2:23PM
YoxView works perfectly well in IE7 and (with a few minor issues) in IE6. The problem in this case is with the calling code which Erez used, an unnecessary trailing comma. I've sent him the fix, though.
mazzthepianomanApr 8th 2010 7:42PM
I still get the same error in IE6 and 7 after flushing cache and refreshing:
Line: 16
Char: 13
Error Expected identifier, string or number
Code: 0
URL: http//ezuk.org/pix/Cats.html
Plus the top of the header is cutoff on each.
DavidApr 14th 2010 2:12PM
I like this plug-in and it's very fast using google's image servers.
Is there a video playing add-in that is clean like this that could pull video from Google or any other server?