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? SmugMug allows users to mark images as public or private. If your images are private they won't show up on your profile page and other users are only supposed to be able to find them if you send them a special URL, which is not password protected.
Sure, a password would make the page more secure, but it would also make it more inconvenient for your friends, family, and colleagues to see your vacation photos. But as long as there's no easy way for the general public to find your photos, they're still secure from prying eyes, right?
Maybe not. The problem is that SmugMug gives images a predictable URL string, starting with http://www.smugmug.com/gallery/1000. All you have to do is change the number and you'll start to find photo album after photo album, whether they're market public or private.
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. YoxView has the usual lightbox effect but adds a few bells and whistles such as easy support for multiple instances (great for blogs), image pre-caching, timed slideshows, keyboard support, and language packs. The lightbox itself dynamically resizes for each image with a nice little jQuery animation.
YoxView is available under the MIT license (X11) both as a jQuery plugin and as a standalone application.
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:
- Download YoxView..
- Unzip it to a folder on your hard drive.
- 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.
- 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).
- 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).
- 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.
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>
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.
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.
.png)