Fetch and Display Dribbble Shots with jQuery HighlightReel Plugin

HighlightReel is a jQuery based dribbble widget used to fetch and display the most recent shots from any Dribbble user.

This plugin is broken. Please check out the My Dribbble Gallery plugin.

How to use it:

1. Include the latest jQuery javascript library and jQuery highlightreel's script file in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./src/jquery.highlightReel.js"></script>

2. Create a container for the dribbble widget.

<div class="highlightReel">
<div id="loading"></div>
</div>

3. Style the widget via CSS.

.highlightReel {
border: 1px solid #ccc;
float: left;
padding-left: 0;
width: 30%;
list-style-type: none;
margin-left: 35%;
background-color: #fff;
}
.highlightReel .details {
border-bottom: 1px solid #ccc;
padding: 1em;
float: left;
}
.highlightReel .stats {
width: 100%;
float: left;
list-style-type: none;
padding-left: 0;
}
.highlightReel .stats li {
float: left;
width: 50%;
text-align: center;
}
li:hover {
background-color: #eee;
}
img {
margin: 0.5em;
border: 1px #ccc solid;
}
.title {
font-weight: bold;
width: 100%;
float: left;
}
.likes:after {
content: " likes";
}
.views:after {
content: " views";
}

4. Call the plugin and insert the username in the javascript.

<script>
$(".highlightReel").highlightReel({
username : "rikitanone"
});
</script>

5. All the options.

<script>
$(".highlightReel").highlightReel({
username: "rikitanone",
count: 5, //  the number of list items
title: true,
teaser: true,
linked: true,
stats: true
});
</script>

---

This awesome jQuery plugin is developed by jmduke. For more Advanced Usages, please check the demo page or visit the official website.