Use jquery to get dribbble content

Introduction

As a web developer, third party API integration are something you'll have to the face. Especially with the current trend, we have Facebook, Twitter, Flickr etc. Today, we are going to look at Dribbble ' s API. Dribbble is a place to show off your design, it's based on invitation basis, therefore, the most designs is of the high quality.

Demodownload

Demo Download

Html

Initially, you just has to create a div with a class called Drib-list and specify an ID also if you intended to use it mu Ltiple times.

<div class= "Drib-list clearfix" id= "popular" >
Once all the dribbble items were loaded, data is grabbed from the APIs and then being parsed into a predefined HTML Structur E. This HTML structure are created to accommodate the sliding up and down simple animation as well.
<div class= "Drib-item" ><div class= "drib-image" ><a href= "{URL}" ></a></div><div class=" Drib-detail "><div class=" Drib-detail-wrapper "><a href=" # " >{title}</a><ul><li class= "views" >{views}</li><li class= "likes" >{likes}</li ><li class= "Comments" >{comments}</li></ul></div></div></div>
Css
The following is the CSS, we use for this dribbble plugin. We used plenty of CSS3 to make it looks good.
Body {font-family:arial;font-size:75%;margin:0 0 170px 0;padding:0;background: #2F2F2F; color: #C6C6C6;} HR {-moz-box-shadow:rgba (255, 255, 255, 0.07) 0 1px 0;-webkit-box-shadow:rgba (255, 255, 255, 0.07) 0 1px 0;-o-box-shadow : Rgba (255, 255, 255, 0.07) 0 1px 0;box-shadow:rgba (255, 255, 255, 0.07) 0 1px 0;border-bottom:1px solid #121212; border- Top:none;margin:18px 0;display:block;} H1 {font:30px Tahoma, Helvetica, Arial, Sans-serif;text-align:left;color: #555; text-shadow:0px 2px 5px #111; margin:20p x 0 10px 0;}. drib-list {width:1080px;margin:15px auto 0 auto;padding-left:10px;}. Drib-item {width:200px;height:150px;border:5px solid #ccc;p osition:relative;overflow:hidden;border:1px solid Rgba (0 , 0, 0, 0.05);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:rgba (255, 255, 255, 0.1) 0 1px 0, rgba (0, 0, 0, 0.8) 0 1px 7px 0px inset;background: #202020; Background-color:rgba (0, 0, 0, 0.3); margin-bottom:10p x;float:left;margin-right:10px;}. drib-image,.drib-Detail {width:100%;p osition:absolute;left:0;}. drib-image {top:0;z-index:10;}. Drib-image img {-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:0;}. Drib-detail {z-index:0;height:50%;bottom:0;background: #333;-webkit-box-shadow:inset 0 0 10px 5px rgba (0, 0, 0, 0.5);- Moz-box-shadow:inset 0 0 10px 5px rgba (0, 0, 0, 0.5), Box-shadow:inset 0 0 10px 5px rgba (0, 0, 0, 0.5);}. Drib-detail-wrapper {margin:14px 10px 0 10px;}. Drib-detail a {color: #eee; font-weight:bold;display:block;text-decoration:none;font-size:110%;}. Drib-detail a:hover {color: #ffffff}.drib-detail ul {margin:2px 0 0 0;p adding:0;list-style:none;}. Drib-detail li {float:left;margin-right:5px;background:url (' sprite.png ') no-repeat 0 0;padding-left:24px;height : 20px;line-height:22px}.drib-detail li.comments {background-position:0 0;}. Drib-detail li.views {background-position:0 -39px;}. Drib-detail li.likes {background-position:0 -79px;}    /* New Clearfix */.clearfix:after {visibility:hidden; Display Block    font-size:0;    Content: "";    Clear:both;    height:0; }* html. clearfix {zoom:1;}/* IE6 */*:first-child+html. clearfix {zoom:1;}/* IE7 *
Javascript
If you read my preview tutorial on Twitter API, you should able to understand this section easily as well. Dribbble API documentation is pretty neat and straight forward, it's still in Beta stage at the moment, but it ' s pretty st Able.
In this tutorial, we'll be using:

 
 

  
  
 
   
Http://api.dribbble.com/shots/{list}: Return debuts, everyone, popular shots.
 
   
Http://api.dribbble.com/players/{id}/shots:return a player ' s recent shots.
 
  
 
 
However, we'll not be retrieve it directly from Javascript, we call it using PHP to solve AJAX cross domain issue. I wrote a simple PHP proxy to retrieve the JSON data from dribbble. It's not the best PHP script (it's very rough!), but it'll do the job just fine. You can enhance the PHP from this such as adding cache control to reduce number of call to Dribbble, and perhaps, make it A little bit more secure.
<?php$player = $_get[' Player ']; $type = $_get[' type ']; $list = Array (' Popular ', ' debuts ', ' everyone '), if ($player) {if ( In_array (Strtolower ($player), $list)) {$data = file_get_contents (' http://api.dribbble.com/shots/'. $player);   } else {$data = file_get_contents (' http://api.dribbble.com/players/'. $player. '/shots ');   } Header (' Content-type:application/json '); echo $data; exit;} echo 0;? >
Alright, back to Javascript. This is a Javascript plugin, and it's possible to run multiple instances the this dribbble script. I have added-inline comment to describe some of the codes.
(function ($) {//attach This new method to JQuery $.fn.extend ({dribbble:function (options) {var def Aults = {player: ',//username, debuts, popular or everyonetotal:3//1-15, return result, by default dribbble return 1              5} var options = $.extend (defaults, options); var o = options;  Iterate over the current set of matched elements return This.each (function () {//-is the HTML             Structure for every a shots, and then'll be appended to the HTML. You can view the structure better in HTML sections of this tutorial.var struct = ' <div class= ' Drib-item ' ><div class= "Drib-image" ><a href= "{URL}" ></a></div><div class= "Drib-detail" ><div class= "Drib-detail-wrapper" ><a href= "#" >{title}</a><ul>< Li class= "views" >{views}</li><li class= "likes" >{likes}</li><li class= "comments" >{ comments}</lI></ul></div></div></div> ', html = ', Holder = $ (this);//Make a AJAX call to the PHP script we Wrote.$.ajax ({type: "Get", url: "dribbble-call.php", Data: "player=" + O.player, success:function (data) {//Do an Sure there is data returned from the servicetry {if (data.shots.length > 0) {var shots = data.shots;  Loop through the data and apply the HTML code with the data for (var i=0; i< shots.length; i++) {if (I < o.total) {html + = Struct.replace (/{title}/g, Shots[i].title). Replace (/{image}/g, Shots[i].image_teaser_url). Replace (/{url}/ G, Shots[i].url). Replace (/{views}/g, shots[i].views_count). Replace (/{likes}/g, shots[i].likes_count). Replace (/{ Comments}/g, Shots[i].comments_count);}} Holder.append (HTML);} else alert (' No data returned from dibbble! ');}   catch (E) {alert (e);} }});//This is the hover effect $ ('. Drib-item '). Live ({mouseenter:function () {$ (this). Find ('. Drib-imag E '). Stop (). Animate ({top: ($ (this). Height ()/2 *-1)}, 300);           }, Mouseleave:function () {$ (this). Find ('. Drib-image '). Stop (). Animate ({top:0}, 300);                        }       }    );                  }); }    });}) (JQuery);
Usage
The usage of this plugin are pretty simple, make sure you have the JQuery framework 1.6 and above, and link the CSS and JS file s properly.
Javascript
$ (function () {$ (' #popular '). Dribbble ({player: ' popular ',//username, debuts, popular or Everyonetotal:5});});
Html
<div id= "popular" ></div>
Conclusion
It's not a hard-to-pick up third party API. Take the dribbble API as an example, it's easy to understand and implement. However, you should aware of the API changes, especially this one because it's still in beta stage, and normally there 'll is update to the API in the future. Do subscribe to it Developer Newsletter or any form of communications so you'll know what went wrong if this script sto pped working.
I hope you gained some knowledge and skill in learning what to manipulate third party API. If you want to learn more, you can visit my previous Twitter API tutorials:

 
 

  
  
 
   
Create a dead simple Twitter feeds with jQuery
 
   
Create a Twitter feed with attached images from media entities
 
   
Create a Twitter feed with hash tah and cache support
 
  
 
 
Frome HTTP://WWW.QUENESS.COM/POST/11929/HOW-TO-GRAB-DRIBBBLE-FEED-WITH-JQUERY-AND-CSS3
Use jquery to get dribbble content