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: into the header tag:

<script src=""></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
    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


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!

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;
    height: 75px;
    border: none;

Leave a Reply