64x64 icon dark hosting
Deploy New Relic now and get $135 off your Tuts+ subscription.
Advertisement

How to Create an Image Gallery Powered by Picasa

by

In this tutorial we are going to create a simple image gallery powered by Google's Picasa Web Albums. In order to enhance the user's experience, we'll throw some jQuery into the mix and create a scrollable album carousel.

Final Product

Overview

We are going to use PHP's SimpleXML extension to sort and access the data inside the XML feed provided by Picasa Web Albums. jQuery will be responsible for the DOM manipulation and AJAX request. We are also going to use the Scrollable library, which is part of jQuery Tools to create the carousel. Next, we'll use jQuery's MouseWheel plug-in to allow for cross-browser mouse wheel support. Finally, we'll use the Fancybox plug-in to each image in a "lightbox."

What We Need

Getting Started

We'll begin by downloading the files and putting them into the same folder. I also combined all of the Fancybox images with jQuery Tools ones, and placed them inside the img folder.

PHP files

For our project, we are going to use following PHP files:

  • index.php
  • _ajax.php
  • _conf.php
  • index.php will be responsible for displaying albums, images, and sending requests to _ajax.php.
  • _ajax.php will be handling dynamic request and returning formatted thumbnails
  • _conf.php, as you may have guessed, will contain some configuration information that will be used by both files.

_code.php

This file is very simple and short.

Basically, in this file we set the username (Picasa Web Album ID), thumbnail size, and max image size that we are going to show in our gallery.

index.php

This file requires a bit more to make the gallery work. We begin with referencing our configuration file (_conf.php):

Next we need to load the album feed. We are only retrieving publicly available albums, so our request will look something like: "http://picasaweb.google.com/data/feed/api/user/user_name?kind=album&access=public".

file_get_contents will load content from the XML feed into $file variable. As you can see, we used the $uName variable defined in _conf.php to get the right feed. We also passed the additional parameter "thumbsize;" so that the returned feed will contain thumbnails of our chosen size.

Now, let's convert the contents of the feed into a SimpleXml object and define the namespaces we are going to use:

You can find all namespaces used in the API feeds by visiting http://code.google.com/apis/..., but we'll only be using "media" and "gphoto" in our tutorial; you do not have to worry about the rest of them.

Next, we'll get the web album's name in case we did not already set one in __conf.php file:

Finally, it is time for some simple HTML. We'll set our header and reference a few CSS files.

As you can see, we've set the page title to $gTitle and have added some CSS to make things pretty.

Style Files

I do not think that reset.css needs any additional explanation, so let's skip over it and take a closer look at the other stylesheet.

  • 960.css allows for a more grid-like layout.
  • style.css comes from the provided stylesheet from jQuery Tools.
  • And fancybox.css is part of the FancyBox plug-in.

Note: Please make sure that you change image path in both fancybox.css and style.css, so all background images point to img folder.

Album Holder and Navigational Elements

It is time to create our album holder and navigational elements. This is where jQuery Tools is a huge help. For the album navigation, we'll be using the Scrollable library. If you visit the Scrollable reference page and take a look at some of the examples, you'll see that we're using it almost without any modifications.

We'll also need a holder for the album picture thumbnails, and the album title that will be loaded via AJAX:

JavaScript

Let's finish our page by referencing the JavaScripts we'll be using.

PHP

Now it is time to go through the XML file and sift the album thumbnails out. Place the following PHP code inside the </div class="items"> element.

Our plan was to load album pictures once visitors click on a specific thumbnail, therefore we have to create some kind of reference to connect the two. For this purpose, we are putting a ref attribute into each album's img tag; so it will look something like this when compiled:

AJAX

Finally, we'll spice it all up with some jQuery. Firstly, we need to initialize the jQuery Tools plug-in with some additional parameters:

The code above will automatically add scrollable controls.

Note: It is better to set the scrollable size to an odd number. This way, selected images will appear right in the middle.

Next we'll create on click event for the album thumbnail:

Let's take close look at what we are doing here. First we define our click event trigger:

We use bind instead of the simple click because we do not want to interrupt the work of the scrollable plug-in that we just initiated above.

Next, we'll apply the album title into the h2 tag with id "a_title" from the title attribute of the anchor tag:

Finally, we send an AJAX request to _ajax.php and let Fancybox re-index the freshly loaded images:

As you probably noticed, we are inserting a "loading image" inside "pic_holder" before sending the AJAX request. This will provide the user with some feedback to let them know that their request is currently being processed. Once we receive a response from the server, jQuery will replace the contents of the "pic_holder" with data that came from _ajax.php.

_ajax.php

Now it is time to serve the contents of the album to our visitors. Our plan is to show thumbnails linked to originals on the Picasa server. Once a thumbnail is clicked, Fancybox will take over and create a lightbox-like image gallery. We'll start with the entire contents of the file, and then go over each line:

First, we are going to reference our configuration file, so we can have access to the constant parameters: Picasa ID and thumbnail size.

Then we'll check if the album ID was sent via POST request:

If we did not find an album ID, we're simply going to print an error message:

If _ajax.php received the album ID, we'll get an XML feed and start working on it, so let's create a link to the correct XML feed:

As you can see, we use the album ID that came via the POST request as well as constants from _conf.php file. Again, we are using file_get_contents to load the XML feed and store it in the $file variable. Next we convert it to a SimpleXMLElement object cycle through each entry nodes that contain information about each picture. To do so, we'll use a simple foreach() loop.

Next, we are ready to extract data needed for our link and thumbnail. I've commented every line and hopefully it is enough to understand what is going on:

Finally, we are putting it all into HTML context. We'll echo a link to the original image and thumbnail image:

To force Fancybox to organize all of the images into a gallery, we are adding the rel attribute to each link. You can simply put same number or string as value, but I'm going to use the album ID.

Styling

As I mentioned before, most of the styling was taken straight from examples at the jQuery Tools website. All you must do here is simply adjust the height and width to suit the design of your website.

Mouse Wheel Scroll

Mouse Wheel Scroll is another beauty that you can easily use. As some may have noticed, we never initiated this plug-in; yet, if you hover over the album carousel and try to scroll with your mouse wheel, it will work thanks to jQuery Tools.

Conclusion

We've learned how to combine PHP's SimpleXML extension with a handful of plugins and Picasa to create a beautiful and dynamic image gallery. I hope you enjoyed and learned from it!


Advertisement