My wife and I made something a couple of weeks ago, and her name is Simone. Our families and some friends want to see lots of pictures, but most people don’t want us to flood their Facebook feeds with baby photos (nor do we want to). So we’ve been uploading them to Flickr mostly, but I wanted a slightly simpler page where people could just see a carousel slideshow of photos of our daughter. There was no good immediately-integrated-with-Flickr JavaScript carousel I could find, but I was pretty easily able to integrate it with Fotorama.

Here is the final product (and beautiful pictures of my girl). Here are the easy steps to do it yourself:

  1. Sign up for a Flickr API key. If this is a non-commercial site, it's free and instant.
  2. Grab the download or copy the hotlink markup from the setup page in the Fotorama docs
  3. Add this markup to your page: 
    <div class="carousel" data-auto="false"></div>
    There's a lot of configuration options you can add besides that. Here's the full list.
  4. And now the final step, the JavaScript that populates the carousel: 
      <script type="text/javascript">
    $(function() {
      var AddPhotosToCarousel = function(data) {
      var imgs = [];
      $.each(data.photoset.photo, function(index, photo) {
        imgs.push({img: photo['url_m'],
                   thumb: photo['url_sq'],
                   caption: photo['title']});
        });
        $('.carousel').fotorama({ data: imgs });
      };
      $.getJSON('[api.flickr.com/services/...](https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=XXXXXXXXXX&photoset_id=YYYYYYYYYY&format=json&extras=url_sq,url_m&jsoncallback=?',) AddPhotosToCarousel);
    });
  </script>

You must put your API key and your photoset’s id into that big URL you pass to $.getJSON(). If you want the photos to show up in reverse order (as I did), change imgs.push() to imgs.unshift(). You can display things other than photosets (search results and such), but you’ll need to dig into the Flickr API docs to build those queries yourself.