Most designers on dribbble have a personal portfolio website that usually consists of a name and a bit about themselves – maybe even some work.

When it comes to updating this static page you usually put it off in favour of the booming community of dribbble as it is thriving, less hassle and quick.

In this article I’ll explain how to create a dribbble powered portfolio that updates automatically using jRibbble.

For this tutorial I created a simple HTML template as I didn’t want to make it more complex than it really is.

The main point to this tutorial is to enable you to incorporate your dribbble feed into your own design. I am not teaching how to design or develop a page.

Let’s Get Started

I’m assuming in this tutorial you have some decent HTML & CSS knowledge and havesome understanding of JavaScript (jQuery).

Firstly we are going to start with a basic HTML5 markup and include our: stylesheet, jQuery and jRibbble.

<!DOCTYPE html>

<html>

  <head>

    <title>Create a Dribbble Powered Portfolio by Ultralinx</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Page Style -->

    <link href="css/style.css" rel="stylesheet" >

    <!--[if IE]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

  </head>

  <body>

    <!-- jQuery  -->

    <script src="http://code.jquery.com/jquery.js"></script>

    <!-- jRibbble -->

    <script src="js/jquery.jribbble.js"></script>

  </body>

</html>

You can download the barebones of this project here (The project up to this step) and follow along.

We are then going to create a container which the feed will be displayed in and call it “dribbble-feed”. This will go inside the body.

<section class="dribbble-feed">

      <!--Dribbble feed-->

</section>

This will be empty and no HTML will be written by us. jRibbble generates the HTML that will go into this container.

If we look at the page at the present it won’t display any content. This is because we have not asked jRibbble to fetch the content for us.

To do this we are going use the following javscript (jQuery) to tell jRibbble to get the shots and display the way we want.

You are in control of how it’s displayed. For this tutorial I am going to get the dribbble shots and link them to their page on dribbble.

Paste the below code outside the body but inside the html. So after “</body>” but before “</html>”.

<script type="text/javascript">

$(document).ready(function getDribbbleShots() {

  $.jribbble.getShotsByPlayerId('Ultralinx', function (playerShots) {

      var html = [];

      $.each(playerShots.shots, function (i, shot) {

          html.push('<div class="shot"><a href="' + shot.url + '" target="_blank">');

          html.push('<img class="shot-image" src="' + shot.image_url + '" ');

          html.push('alt="' + shot.title + '"></a></div>');

      });

      $('.dribbble-feed').html(html.join(''));

  }, {page: 1, per_page: 9});

});

</script>

What? How does that get the shots?

Well I will break it down line by line.

$(document).ready(function () {

This calls jRibbble once the document (page) has loaded.

$.jribbble.getShotsByPlayerId('UltraLinx', function (playerShots) {

This is asking jRibbble to get the the shots for ‘Ultralinx‘. You would replace this with your dribbble username or id.

var html = [];

This creates an empty array of all the html we will generate below that will contain the shots.

$.each(playerShots.shots, function (i, shot) {

This is a for each loop. Basically it means “For Each” shot on your dribbble profile produce the following code.

html.push('<div><a href="' + shot.url + '" target="_blank">');

html.push('<img src="' + shot.image_url + '" ');

html.push('alt="' + shot.title + '"></a></div>');

});

Each tag: “+ shot.url +”, “+ shot.image_url +” and ” + shot.title +” has a line to itself. You are in control of any classes you set for CSS customisation.

This creates a div with the image inside that links to the dribbble page.

$('.dribbble-feed').html(html.join(''));

This is joins all that information stored in the array to produce the HTML and puts it in the “dribbble-feed” container we made earlier.

 }, {page: 1, per_page: 9});

});

This is tells jRibbble how many shots to grab per page. This isn’t the pages on your dribbble profile. A page is define by what you choose “per_page”.

In the example I have chosen 9 shots per page which means page 2 will display shots 10-19 and so on.

If you view the page now it should display the shots. You can then use CSS to style them to suit your needs.

That’s it basically. My next tutorial will explain how to display more information and enable pagination.

Quick Last Minute Tip

As there are 9 images being loaded at once some peoples internet may not be fast enough to instantly display them all and may experience a slight delay.

We can solve this by hiding the “dribbble-feed” until the images are loaded. Place this before the code previously written.

$('.dribbble-feed').hide();

jQuery(window).load(function(){

$('.dribbble-feed').fadeIn();

});

This hides the container that will display the shots until it is fully loaded then fades it in.

You can even go that bit extra and add a loading bar then hide it when the feed is loaded.

I hope this is worthwhile to people who don’t have time to figure out the dribbble API and prefer to use jQuery in their projects.

Download Source | Live Demo

创建一个Dribbble的作品展示的更多相关文章

  1. 【读书笔记《Bootstrap 实战》】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

  2. 【Bootstrap】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

  3. 通过创建一个简单的骰子游戏来探究 Python

    在我的这系列的第一篇文章 中, 我已经讲解如何使用 Python 创建一个简单的.基于文本的骰子游戏.这次,我将展示如何使用 Python 模块 Pygame 来创建一个图形化游戏.它将需要几篇文章才 ...

  4. 搭建QQ聊天通信的程序：（1）基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 （1）

    搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 原文地址(英文):http://www.networkcomms.net/creating ...

  5. 利用django创建一个投票网站（三）

    创建你的第一个 Django 项目, 第三部分 这一篇从第二部分(zh)结尾的地方继续讲起.我们将继续编写投票应用,并且聚焦于如何创建公用界面--也被称为"视图". 设计哲学 Dj ...

  6. linux内核分析作业6：分析Linux内核创建一个新进程的过程

    task_struct结构: struct task_struct {   volatile long state;进程状态  void *stack; 堆栈  pid_t pid; 进程标识符  u ...

  7. 《Entity Framework 6 Recipes》翻译系列 (3) -----第二章 实体数据建模基础之创建一个简单的模型

    第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...

  8. Orchard入门：如何创建一个完整Module

    这是一个Orchard-Modules的入门教程.在这个教程里,我们将开发两个功能页面分别用于数据录入与数据展示. 完成上述简单功能开发,我们一共需要6个步骤.分别为: 创建Module 创建Mode ...

  9. 第六周——分析Linux内核创建一个新进程的过程

    "万子恵 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 &q ...

随机推荐

  1. 寻找第K大的数(快速排序的应用)

    有一个整数数组,请你根据快速排序的思路,找出数组中第K大的数.给定一个整数数组a,同时给定它的大小n和要找的K(K在1到n之间),请返回第K大的数,保证答案存在.测试样例:[1,3,5,2,2],5, ...

  2. 「雅礼集训 2017 Day2」水箱

    题目链接 题意分析 我们用\(f[i][j]\)表示当前到达第\(i\)个位置水位高度为\(j\)的答案 如果那么\(h[i]\)为\(i\)和\(i+1\)之间的支柱高度 那么如果\(j≤h[i]\ ...

  3. 49.RocketMQ 双主搭建（本文非EamonSec原创）

    声明:本文非EamonSec原创,copy自网上下载的某个个文件 1.RocketMQ介绍 1.1. 简介 RocketMQ 是一款分布式.队列模型的消息中间件,具有以下特点: 能够保证严格的消息顺序 ...

  4. Spark构成

    RDD Spark基本的数据结构叫弹性分布式数据集(Resilient Distributed Datasets,简称RDD). 概念: 一个分布于集群节点的只读数据集合,并以容错的.并行的方式进行维 ...

  5. UITableView 头部效果/放大/移动跟随效果

    [self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOp ...

  6. Windows下部署安装Docker

    好长时间没用Docker,最近准备部署一下,做个记录,今天早上去官网下载,发现Docker开始区分Docker Community Edition(社区版)和Docker Enterprise Edi ...

  7. sqlalchemy的外键与relationship查询

    https://www.cnblogs.com/goldsunshine/p/9269880.html 讲的很详细. http://www.bjhee.com/flask-ext4.html 思诚之道 ...

  8. Struts2 漏洞系列之S2-001分析

    0x00 前言   最近在学习java的相关漏洞,所以Struts2的漏洞自然是绕不开的.为了更好的理解漏洞原理,计划把Struts2所有的漏洞自己都做一个复现.并且自己去实现相关的POC.相关的环境 ...

  9. sql geography类型（地理坐标） 赋值

    sql 语句赋值 update [lishui].[dbo].[t_NearbyService] ,, ) ,[locationbaidu]=geography::Point(,, ) where [ ...

  10. 100道C#面试题（.net开发人员必备）

    1. .NET和C#有什么区别 答:.NET一般指 .NET FrameWork框架,它是一种平台,一种技术. C#是一种编程语言,可以基于.NET平台的应用. 2．一列数的规则如下: 1.1.2.3 ...