Search for photos using JQuery, Flickr API and Fancybox part 1

We all heard how cool the Flickr api can be. So I decided to create an search form using Flickr Api.
Here is how will finally look and work.

What we will achieve after this tutorial is done?
1. Top left, we’ll have an input where the user can enter a search keyword.
2. The search fetches data from the API mentioned above and renders a list of images on the right.
3. Previous searches are cached in a search history list. (bottom left) Clicking a history item would show the results without doing a request to Flickr.

In the first part of the tutorial I will create the HTML and CSS and in the second part I will talk about the JavaScript that does all the requests, retrieves the data and stores our searches in the left sidebar.

Frist the HTML:

<div id="wrapper">
 <div id="left_sidebar">
  <form class="search_form" action="" method="post">
   <input id="keywords" type="text" /> 
   <button id="search" name="search">Search</button></form>
  </div>
</div>

So I have created a main wrapper that holds all the content. Within this wrapper I have a left sidebar and the content which is in the right side.
In the left sidebar it’s located our search form it doesn’t have anything special, actions, methods or hidden inputs. Just a search form with an input text and a submit button.

The main content where the boxes will be inserted it’s not created from HTML because it will be created using JQuery.

Second the CSS:

/* -----------------------------------------------------------------------------
 * Main Style
 * ----------------------------------------------------------------------------- */
html, body {
 background:#fff;
 font:14px/14px Arial, sans-serif normal;
 color:#4d4f52;
 margin:0;
 padding:0;
 width:100%;
 height:100%;
}
a {
 color:#4d4f52;
 text-decoration:none;
}
a:hover {
 text-decoration:none;
}
ul {
 list-style:none;
 margin:0;
 padding:0;
}
.clear {
 clear:both;
}
/* -----------------------------------------------------------------------------
 *  LEFT SIDE CONTENT
 * ----------------------------------------------------------------------------- */
#left_sidebar {
 background:#d6dce4;
 border-right:1px solid #000;
 width:20%;
 float:left;
 height:100%;
 min-height:700px;
 /*position:fixed;*/
}
.search_form {
 background:#f2f2f2;
 padding:20px 10px;
 margin:0;
}
.search_form input[type="text"] {
 background: #F9F9F9;
 border-color: #A0A0A0 #DDDDDD #DDDDDD #A0A0A0;
 border-radius: 4px;
 border-style: solid;
 border-width: 1px;
 padding: 2px 5px 3px;
}
.search_form button {
 padding:2px 10px 3px;
 border:0;
 background:#39B5E8;
 background: -webkit-gradient(linear, left top, left bottom, from(#39B5E8), to(#0481B1)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #39B5E8,  #0481B1); /* for firefox 3.6+ */
 background-image: -o-linear-gradient(#39B5E8, #0481B1); /* opera gradient */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#39B5E8', endColorstr='#0481B1'); /* for IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#39B5E8, endColorstr=#0481B1)"; /* IE8 + */
 box-shadow:0px 1px 3px #ccc;
 color:#fff;
 text-shadow:1px 1px 1px #000;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 cursor:pointer;
}
.search_form button:hover {
 background:#39B5E8;
}
#left_sidebar .history_list {
 display:block;
 border-top:1px solid #e7edf6;
}
#left_sidebar .history_list a {
 display:block;
 padding:5px 10px;
 border-top:1px solid #65686c;
}
#left_sidebar .history_list a:hover {
 background:#f2f2f2;
}
/* -----------------------------------------------------------------------------
 * Main Content
 * ----------------------------------------------------------------------------- */
#content {
 float:left;
 width:45%;
 padding:20px 40px 20px 10%;
}
.avatar {
 float:left;
 margin-right:10px;
 width:100px;
 height:100px;
 overflow:hidden;
 box-shadow:0 0 3px #bebdbe;
 border:1px solid #bebdbe;
 background:#fff;
 padding:1px;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 margin-bottom:10px;
 }
 .avatar:nth-child(5n+6) {
  clear:left
 }
 .avatar img {
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border:0;
 }
.no_result {
 float: left;
 padding: 20px 40px 20px 270px;
 width: 77%;
}

First I style the main tags from our layout, html, a, ul, li. Nothing quite special about this. Just some colors, resets and font sizes.

The left side content:

#left_sidebar {
 background:#d6dce4;
 border-right:1px solid #000;
 width:20%;
 float:left;
 height:100%;
 min-height:700px;
}
.search_form {
 background:#f2f2f2;
 padding:20px 10px;
 margin:0;
}
.search_form input[type="text"] {
 background: #F9F9F9;
 border-color: #A0A0A0 #DDDDDD #DDDDDD #A0A0A0;
 border-radius: 4px;
 border-style: solid;
 border-width: 1px;
 padding: 2px 5px 3px;
}
.search_form button {
 padding:2px 10px 3px;
 border:0;
 background:#39B5E8;
 background: -webkit-gradient(linear, left top, left bottom, from(#39B5E8), to(#0481B1)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #39B5E8,  #0481B1); /* for firefox 3.6+ */
 background-image: -o-linear-gradient(#39B5E8, #0481B1); /* opera gradient */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#39B5E8', endColorstr='#0481B1'); /* for IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#39B5E8, endColorstr=#0481B1)"; /* IE8 + */
 box-shadow:0px 1px 3px #ccc;
 color:#fff;
 text-shadow:1px 1px 1px #000;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 cursor:pointer;
}
.search_form button:hover {
 background:#39B5E8;
}
#left_sidebar .history_list {
 display:block;
 border-top:1px solid #e7edf6;
}
#left_sidebar .history_list a {
 display:block;
 padding:5px 10px;
 border-top:1px solid #65686c;
}
#left_sidebar .history_list a:hover {
 background:#f2f2f2;
}

In the left sidebar it will be the search form which uses some CSS3 for the background gradient and the input background gradient. After calling the api the JQuery will create the history_list element plus the a tag. As you can see from the style they have background and each history_list will have a link inside of it which has padding and background and hover effect.

The main content:

/* -----------------------------------------------------------------------------
 * Main Content
 * ----------------------------------------------------------------------------- */
#content {
 float:left;
 width:45%;
 padding:20px 40px 20px 10%;
}
.avatar {
 float:left;
 margin-right:10px;
 width:100px;
 height:100px;
 overflow:hidden;
 box-shadow:0 0 3px #bebdbe;
 border:1px solid #bebdbe;
 background:#fff;
 padding:1px;
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 margin-bottom:10px;
}
.avatar:nth-child(5n+6) {
 clear:left
}
.avatar img {
 border-radius:8px;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border:0;
}

Furthermore when the JQuery will create the history_list which I described above, in the same time will create the content box. In this main holder will create a box with the class avatar which is the holder for each photo found on Flickr. Each box will float left, has a background and rounded corners. But as you can see I used :nth-child(5n+6) this property finds the 6th child from our content and clear’s not to float anymore. In addition to this the image has rounded corners to.

That’s pretty much it with the first part of our tutorial. In the part 2 I will talk about the JavaScript function and how we retrieve all the photos from Flickr and store them using JQuery data.

Here is the standalone example.

3 thoughts on “Search for photos using JQuery, Flickr API and Fancybox part 1

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.