Introduction

As a web developer, third party API integration is something you will have to 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, most designs are of high quality.

Demo Download

HTML

Initially, you just have to create a div with a class called drib-list and specify an id also if you intended to use it multiple times.

<div class="drib-list clearfix" id="popular">
<h1>Popular</h1>
</div>

Once all the dribbble items are loaded, data is grabbed from the API and then being parsed into a predefined HTML structure. This HTML structure is created to accommodate the sliding up and down simple animation as well.

<div class="drib-item">
<div class="drib-image">
<a href="{url}"><img src="{image}" alt="{title}" /></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: 20px 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;
position: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:10px;
float:left;
margin-right:10px;
} .drib-image,
.drib-detail {
width:100%;
position: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 ;
padding: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 about 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 stable and easy to use.

In this tutorial, we will 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 will not 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 will do the job just fine. You can enhance the PHP from here 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 of 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 defaults = {
player: '', //username, debuts, popular or everyone
total: 3 // 1 - 15, return result, by default dribbble return 15
} var options = $.extend(defaults, options);
var o = options; //Iterate over the current set of matched elements
return this.each(function() { // this is the HTML structure for every single shots, and then will be appended to the HTML.
// you can view this structure better in HTML section of this tutorial.
var struct = '<div class="drib-item"><div class="drib-image"><a href="{url}"><img src="{image}" alt="{title}" /></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 another test to make sure there is data returned from the service
try { 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-image').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 is pretty simple, make sure you have jQuery framework 1.6 and above, and link the CSS and JS files properly.

JAVASCRIPT

$(function() {
$('#popular').dribbble({
player: 'popular', //username, debuts, popular or everyone
total: 5
});
});

HTML

<div id="popular">
</div>

Conclusion

It’s not hard to pick up third party API. Take Dribbble API as an example, it’s easy to understand and implement. However, you should always aware of API changes, especially this one because it’s still in beta stage, and normally there will be update to the API in the future. Do subscribe to its developer newsletter or any form of communications so you will know what went wrong if this script stopped working.

I hope you gained some knowledge and skill in learning how to manipulate third party API. If you want to learn more, you can visit my previous Twitter API tutorials:

Frome http://www.queness.com/post/11929/how-to-grab-dribbble-feed-with-jquery-and-css3

使用jQuery获取Dribbble的内容的更多相关文章

  1. 【JavaScript与JQuery获取H2的内容】

    撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...

  2. jquery 获取 json文件内容后,将其内容显示到 下拉列表框中,再将下拉列表中的内容,显示到文本框中

    <script type="text/javascript"> $(function(){ $("#huoqv").click(function() ...

  3. jquery获取页面iframe内容

    //取得整个HTML格式 var f = $(window.frames["ReportIFrame"].document).contents().html(); 或者 $(&qu ...

  4. js和jquery获取属性的区别

    一.获取元素: js获取元素: 根据id获取:document.getElementById("id"); 根据类名获取:document.getElementsByClassNa ...

  5. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

  6. jquery获取内容和属性的方法

    通过jquery如何捕获文本内容和属性? text(),html(),val()及attr(). attr()更具有普遍性,元素text属性和表单value属性,可以通过attr()操作. <! ...

  7. jquery 获取表单的内容以JSON对象形式返回

    添加一个serializeJson方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  8. JavaScript or jQuery 获取option value值 以及文本内容的方法

    1.html <div class="form-group"> <label>保险公司</label> <select class=&qu ...

  9. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

随机推荐

  1. 火狐浏览器下,td 直接使用position:relative;和background:;产生的边框消失问题

    消失示例: td{ width:40px; height:28px; position:relative; background:#ccc; } 出现问题 问题原因: 我的理解是各个浏览器之间对于ba ...

  2. 常用的PHP超全局变量$_SERVER 收集整理

    传送带:https://www.cnblogs.com/rendd/p/6182918.html

  3. lspci

    lspci 是一个用来显示系统中所有PCI总线设备或连接到该总线上的所有设备的工具. 列出所有的PCIE设备: lspci 选项: -v 使得 lspci 以冗余模式显示所有设备的详细信息. -vv ...

  4. Codeforces Round #555 (Div. 3) A B C1(很水的题目)

    A. Reachable Numbers 题意:设f(x)为 x+1 这个数去掉后缀0的数,现在给出n,问经过无数次这种变换后,最多能得到多少个不同的数. 代码 #include<cstdio& ...

  5. /usr/bin/ld: cannot find -lperconaserverclient_r 解决

    编译sqladvisor安装遇到: [root@localhost sqladvisor]# cd SQLAdvisor/sqladvisor/ [root@localhost sqladvisor] ...

  6. 认识CSS中标题引入icon图标

    前端之HTML,CSS(十一) icon图标 icon图标的使用 获取网站的中标题icon图标,以京东为例:在域名后添加/favicon.ico Enter打开 鼠标右键,图标另存为下载icon图标, ...

  7. centos 7修改系统支持中文编码

    2019-03-14 查看系统现支持编码 }[root@web dc2-user]#locale LANG=en_US.UTF- LC_CTYPE="en_US.UTF-8" LC ...

  8. es6里class类

    /** * Created by issuser on 2018/11/27. *///如果静态方法包含this关键字,这个this指的是类,而不是实例./** (1)类的实例属性 1.类的实例属性可 ...

  9. Mac使用Launchd命令行lauchctl操作服务的简单用法

    注意:操作时前面比如带上sudo,不然只能操作当前用户的服务,会出现无法操作一些root用户的服务的问题.系统版本为Mac 10.12. 1.配置好plist之后: #加载一个服务到启动列表 sudo ...

  10. win7 免安装MariaDB

    1.  官网下载MariaDB的windows版本 地址:https://downloads.mariadb.org/mariadb/10.0.17/ 目前最新版本是10.0.17 2.  下载完成后 ...