Building a photo Gallery with Flickr streams and Jquery

Flickr has enabled us to upload the pictures, tag them and share them with our friends and photography enthusiasts. And there are plenty of plugins and widgets to display the latest Flickr pictures on the websites. Now-a-days we see that many webistes display latest pictures through Flickr widgets. But they have limited options to customize the way you want to display the Flickr Gallery.

With emerging Jquery methods and AJAX techniques it has become easy to obtain the Flickr images and display them as gallery. I have used the Jquery getJson method to get the Flickr images.

Download the latest jquery plugin and cycle plugin. Include these javascript files in the head of html file.

First, set up the HTML as below to display the images and its metadata.

<div id="images">
<div id="caption"></div> <div id="date">Date</div>
<div id="author">Author</div>
<div class="clear"></div>
<ul></ul>
</div>

Inlcude the below css in the head of the html file.

<style>
  #images {
   padding:0;
   margin-bottom:20px;
   position:relative;
   margin-top:10px;
 }
 #images ul li {
   background:#000;
   list-style:none;
   overflow:hidden;
   margin-left:0px;
 }
 #images ul {
   padding-left:0px;
   margin-bottom:10px;
 }
 #images ul li a {
  display:block;
 }
 #images ul li a img {
  border:none;
  margin:0 auto;
  display:block;
  text-align:middle;
 }
 .clear { clear:both;}
 #nav {
  position:absolute;
  z-index:100;
 }
 #nav a {
  background: #ccc;
  text-decoration: none;
  margin: 0 4px 0px 0px;
  padding: 3px 5px 3px 5px;
  font-family:verdana;
  font-size:11px;
  color:white;
}
#nav a.activeSlide {
 background: #FFD940;
}
 #nav a:focus {
 outline: none;
}
#caption {
 font-family:verdana;
 font-size:11px;
 font-weight:bold;
 color:#333;
 height:15px;
}
#date,#author,#text-mid {
 font-family:verdana;
 font-size:10px;
 color:#999;
 float:left;
}
#link  {
 float:right;
 text-transform:uppercase;
 font-size:11px;
}
</style>

Include the below Javascript in the head of the html.

$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=40282736@N08&lang=en-us&format=json&jsoncallback=?",
function(data){
 $.each(data.items, function(i,item){
 var sourceSquare = (item.media.m).replace("_s.jpg", ".jpg");
 $("<img id='img0"+i+"'
    alt='"+item.title+"'
    date='"+item.date_taken+"'
    author='"+item.author+"'
    photoid='"+item.link.split("/")[5]+"'/>")
   .attr("src", sourceSquare)
   .appendTo("#images ul")
   .wrap("<li><a href='" + item.link + "' target='_blank'></a></li>");

if($("#images ul li").size()>9) {
		 return false;
}
});
 $('#images ul').after('<div id="nav">').cycle({
 fx:     'fade',
 speed:  1000,
 timeout: 5000,
 pager:  '#nav',
 before: function() {
  $('#caption').html($(this).find('img').attr('alt'));
  var date=$(this).find('img').attr('date')
  date=date.substr(0,10);
  $('#date').html(date);
  var author=$(this).find('img').attr('author').substring(19);
  author=author.substr(0,author.length-1);
  $('#author').html(author);
}
});
});
});

And here you go, you get the fading photo gallery.

Demo

Date
Author

    No Comments so far

    Leave a comment

    (required)

    (required)




    AUTHOR

    profileWeb Developer working in advertising agency.

    Recent tweets

    The Twitter REST API v1 is no longer active. Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.