Dribbble API
How do I make an dribbble api?
Display Dribbble Shots using Dribbble API with jQuery. What is a dribbble api? How do you make a dribbble api? This script and codes were developed by Juan Vargas on 14 October 2022, Friday.
Dribbble API - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dribbble API</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu"> <ul> <li class="logo"><a href=""></a></li> <li><a>Shots</a></li> <li><a>Designers</a></li> <li><a>Teams</a></li> <li><a>Meetups</a></li> <li><a>Stories</a></li> <li><a>Jobs</a></li> <li><a>More</a></li> <li class="drop"><a href=""><i class="fa fa-ellipsis-h"></i> </a></li> </ul>
</div>
<div class="bar">Dribble Shots</div>
<div id="wrapper">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Dribbble API - Script Codes CSS Codes
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #F0F0F0; font-family: Arial, Helvetica, sans-serif; margin: 0px; font-size: 12px; line-height: 22px; color: #555;
}
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;
}
.menu { height: 56px; background: #333; background: rgba(47,47,47,0.98);
}
.menu ul { width:980px; margin:0px auto; padding:0px;
}
.menu ul li{ float:left; list-style:none; display:inline;
}
.menu ul li.active a{ color:#fff;
}
.menu ul li a{ display: block; height: 56px; padding: 0 10px; line-height: 56px; text-decoration: none; color: #999; cursor:pointer;
}
.menu ul li.logo a{ padding: 0 20px 0 0; display: block; width: 76px; height: 56px; background-repeat: no-repeat; background-position: 0 50%; background-image: url(https://d13yacurqjgara.cloudfront.net/assets/logo-small-81973ada6cbc43e760963d9da1cd6478.png); -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease;
}
.menu ul li a:hover{ color:#fff;
}
.menu ul li.drop a { line-height:70px;
}
.menu ul li.drop a i { font-size:25px;
}
#wrapper { margin: 20px; width: 1000px; margin: 0 auto;
}
.shot { float: left; background: #FFF; border: solid 1px #EEE; padding: 12px; margin: 0px 20px 20px 0px; border-radius: 3px; width:226px;
}
.shot img{ min-height:150px;
}
.shot:hover { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2); -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
}
.shot ul { padding: 0px; margin:0px;
}
.shot ul li { float: left; list-style: none; margin-right: 8px; color: #888; font-size: 11px;
}
.shot ul li i{ margin-right:5px;
}
.bar { position: relative; border-bottom: 1px solid #e5e5e5; background: rgba(255,255,255,0.6); text-align:center; padding:15px; margin-bottom:20px;
}
Dribbble API - Script Codes JS Codes
//Get Username
var dribbble = 'creativemints';
//Amoung of shots to display
var limit = 18;
var accessToken = '1c73ffb7859f2c1c37450789dce2369af5caa9e18c3df1fa30485cfad79081d8';
//Call Dribble API
$.ajax({ url: 'https://api.dribbble.com/v1/users/'+dribbble+'/shots?access_token='+accessToken, dataType: 'json', type: 'GET', success: function(data) { for (var i = 0; i < limit; i++) { //Shot with width 200x150 var images_normal = $("<img/>").attr("src", data[i].images.normal).attr("alt", data[i].title); //Shots with width 400x300 var images_teaser = $("<img/>").attr("src", data[i].images.teaser).attr("alt", data[i].title); var likes = $("<li>").html("<i class='fa fa-heart'></li> " + data[i].likes_count); var comments = $("<li>").html("<i class='fa fa-comment'></li> " + data[i].comments_count); var views = $("<li>").html("<i class='fa fa-eye'></li> " + data[i].views_count); var post_stats = $("<ul>").append(views,likes,comments); //Wrap link around image to make clickable image var link = $("<a class='link' target='_blank'>").attr("href",data[i].html_url).append(images_teaser); var shots = $("<div class='shot'>").append(link,post_stats); $('#wrapper').append(shots); } }
});
Developer | Juan Vargas |
Username | juanv911 |
Uploaded | October 14, 2022 |
Rating | 3 |
Size | 3,105 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by Juan Vargas | 2,315 Kb |
Reddit API | 3,721 Kb |
Envato API - New API Version | 4,159 Kb |
Foursquare API - Search Places | 1,913 Kb |
Tumblr API | 2,436 Kb |
Envato API | 3,337 Kb |
Question and Answer | 2,865 Kb |
Base | 2,606 Kb |
Navigation Menu | 2,839 Kb |
SocialCounters - 17 Social Media APIs | 3,034 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
Simple content swap | Snografx | 1,859 Kb |
LDE old privacy page | Jasonangle | 2,339 Kb |
Welcome | Nakome | 6,076 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
React TODO | Enieste | 3,320 Kb |
About Us | Francescaedits | 1,902 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
Price | Catcode | 2,623 Kb |
Single element checkbox | Ivijaygupta | 1,996 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!