How to show images from your flickr account

Quick example of how to show a list of images from your flickr account:

First you need to include jQuery (JavaScript Library: http://jquery.com/) into the header tag:

<script src="http://code.jquery.com/jquery.min.js"></script>

Also add this if you want it to display in a moblie at normal size:

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />

Then you need to write your JavaScript:

  // Waits until the page has fully loaded and jQuery is detected
  $(document).ready(function() {
    // Gets the JSON feed from flickr using the Milton Bayer account ID
    $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?',
    {
    id: '40522003@N05',
    lang: 'en-us',
    format: 'json'
    },
    function(data) {
      // Loops the flickr JSON data list
      $.each(data.items, function(i,item){
        // Appends each image to the flickr div id on the page with alt and title tags
        $('<img/>').attr({'src':item.media.m,
                          'title':item.title,
                          'alt':item.title}).appendTo('#flickr');
      });
    });

  });

Finally you need to add this id tag into the body:

<div id="flickr"></div>

More information on all API’s that Flickr offer can be found here.

If you found this information interesting please comment below!

Share:
Milton Bayer

Milton Bayer

We are Milton Bayer, an award winning, multi-disciplinary, strategic and creative marketing agency.

1 comment

  1. nice my friend…and add this for 😉

    #flickr img{
    float: left;
    width:100px;
    height: 75px;
    border: none;
    }

Leave a Reply