Displaying Flickr photos using the Galleria jQuery plugin

I'm trying to import/show the photos from the Flickr photostream (or开发者_如何学Go set) using Galleria (http://galleria.aino.se/). I couldn't find any useful info in the Galleria documentation. How to go about doing that?

The easiest way is to use Flickr's JSON feed for a photoset.

1. Get the feed

Make sure the set you're trying to use is set to public through Flickr's 'Organise' menu, then view the set and find the RSS link at the bottom of the page. The RSS feed is in XML by default; to get the JSON version simply add &format=json&jsoncallback=? to the end of the URL:

RSS feed: http://api.flickr.com/services/feeds/photos_public.gne?id=xyzexample&lang=en-us

becomes

http://api.flickr.com/services/feeds/photos_public.gne?id=xyzexample&lang=en-us&format=json&jsoncallback=?

2. Parse JSON

This example uses jQuery, so remember to include the jQuery file before this code. This also assumes your Galleria div has an id of 'gallery':

<script type="text/javascript">
$().ready(function() {
  // JSON feed from Flickr
  var feedUrl = "http://api.flickr.com/services/feeds/photos_public.gne?id=xyzexample&lang=en-us&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>');
        });
});
</script>

3. Add Galleria

Start the Galleria plugin on the 'gallery' div:

$("#gallery").galleria();

(obviously you need to include the Galleria plugin and theme, as per their documentation)

There is a Flickr plugin included in the Galleria download from version 1.2.4 that makes these things really easy. Here is the docs for the plugin, including examples: http://galleria.aino.se/docs/1.2/plugins/flickr/