Srilatha Marru's Blog
40 useful and interesting jquery techniques and plugins

In this post, this present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. We look forward to your ideas and suggestions in the comments to this post.  http://tinyurl.com/2d5f6l2

Srilatha Marru's Blog
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


    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.