Note: this post is an expanded version of an answer I gave to this question on Stack Overflow.

Galleria is an impressive gallery plugin for jQuery, and is relatively simple to set up. It's also possible to integrate Flickr pictures with Galleria using the RSS feeds provided by Flickr.



0. Set up your page

Create a page which contains the jQuery library and the Galleria plugin, and which also contains a div with the id of "gallery":

<!DOCTYPE html>
    <html lang="en-GB">
    <head>
      <meta charset="UTF-8">
      <title>Flickr/Galleria demo</title>
    </head>
    <body>
      <h1>Flickr/Galleria demo</h1>
        <div id="gallery"></div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script type="text/javascript" src="/path/to/galleria.js"></script>
        <script type="text/javascript" src="/path/to/galleria.classic.js"></script>
    </body>
    </html>

(using Google’s CDN of jQuery and the bundled Galleria theme)

1. Get the Flickr feed

This method will only work for sets of pictures which have RSS feeds in Flickr - the feed button can be found at the bottom of any public photostream or set. If you're using a Flickr account you have access to, make sure that the set is public through the 'Organise' menu.

2. Use the JSON feed

The feed URL provided uses XML by default; to get the JSON version, append &format=json&jsoncallback=? to the end of the URL:

http://api.flickr.com/services/feeds/photos_public.gne becomes http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?

3. Parse the JSON

Using jQuery's getJson function, walk through the Flickr feed and add the image URLs to the gallery div:

$().ready(function() {
  // JSON feed from Flickr
  var feedUrl = "http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?"

  // parse JSON using jQuery's built-in function
  $.getJSON(feedUrl, function(data) {

        // iterate through each item
        $.each(data.items, function(i, item) {
            // create image node in DOM and update it's src attribute
            // _m = medium img, _b = large; remove the replace function if you want the standard small images
            $("<img/>").attr("src", item.media.m.replace("_m", "_b"))
                // add image to gallery container
                .appendTo("#gallery")
                // add a link to each image - this will go to the photo on Flickr
                .wrap('<a href="' + item.link + '" target="_blank"></a>');
        });
});

4. Activate Galleria

The final stage is to activate Galleria on the #gallery div (using whichever options you feel like):

$("#gallery").galleria({
            width:640,
            height:494,
            image_crop: "height",
            autoplay: true
        });
        ```

<p>The final HTML should look a little something like this:</p>

```html
<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="UTF-8">
  <title>Flickr/Galleria demo</title>
</head>
<body>
  <h1>Flickr/Galleria demo</h1>
    <div id="gallery"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="/path/to/galleria.js"></script>
    <script type="text/javascript" src="/path/to/galleria.classic.js"></script>
    <script type="text/javascript">
        $().ready(function() {

            var feedUrl = "http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?"
            // _m = medium img, _b = large
            $.getJSON(feedUrl, function(data) {
                $.each(data.items, function(i, item) {
                    $("<img/>").attr("src", item.media.m.replace("_m", "_b"))
                        .appendTo("#gallery")
                });

                $("#gallery").galleria({
                    width:640,
                    height:494,
                    image_crop: "height",
                    autoplay: true
                });
            });
        });
    </script>
</body>
</html>