Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fetch everything. Instagram.

  • Loading branch information...
commit 21eebc9f3ccb1463951f47d6496d10d559fcc138 1 parent 8c36429
@iafonov authored
View
23 index.html
@@ -5,12 +5,13 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="https://secure.gravatar.com/avatar/dd13a61bab3fe4243f3ebc683f9219eb.png?s=16" />
<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script type="text/javascript" src="js/flickr.js"></script>
+ <script type="text/javascript" src="js/flickr.js"></script>
+ <script type="text/javascript" src="js/instagram.js"></script>
</head>
<body>
- <img src="https://secure.gravatar.com/avatar/dd13a61bab3fe4243f3ebc683f9219eb.png?s=140"/>
+ <img src="http://gravatar.com/avatar/dd13a61bab3fe4243f3ebc683f9219eb.png?s=140"/>
<div id="content">
<h3>Igor Afonov</h3>
<ul id="contacts">
@@ -45,15 +46,23 @@
<h3>Talks</h3>
<ul id="talks">
<li>
- <a href="http://speakerdeck.com/u/iafonov/p/web-servers-and-how-i-created-my-own-one">Cosmonaut - fast custom built web-server &amp; microframework</a> (<a href="https://github.com/iafonov/cosmonaut">github</a>) <span class="date">[21 Jan 2012]</span>
+ <a href="http://speakerdeck.com/u/iafonov/p/web-servers-and-how-i-created-my-own-one">Cosmonaut - fast custom built web-server &amp; microframework</a> (<a href="https://github.com/iafonov/cosmonaut">github</a>, <a href="http://documentup.com/iafonov/cosmonaut/">docs</a>) <span class="date">[21 Jan 2012]</span>
</li>
<li>
<a href="http://speakerdeck.com/u/iafonov/p/chef-infrastructure-as-code">Chef. Infrastructure as code.</a> <span class="date">[19 Nov 2011]</span>
</li>
</ul>
- <h3>Life &amp; Travel</h3>
- <ul id="photo_sets">Loading...</ul>
- <br/>
+
+ <div id="instagram" style="display: none">
+ <h3><span class="gray">Insta</span>Life</h3>
+ <div id="instagram_photos">Loading...</div>
+ </div>
+
+ <div id="flickr" style="display: none">
+ <h3>Travel</h3>
+ <ul id="photo_sets">Loading...</ul>
+ </div>
+ <br/>
</div>
<script src="http://static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">clicky.init(252648);</script>
View
12 js/flickr.js
@@ -4,27 +4,29 @@ function addLinkToSets(set) {
if (title.indexOf("Other") != 0) {
var link = "http://www.flickr.com/photos/iafonov/sets/" + set.id + "/";
- var linkTitle = parseTitle(title);
- var linkDate = parseDate(title);
+ var linkTitle = parseTitle(title);
+ var linkDate = parseDate(title);
var linkElement = $("<a></a>").attr("href", link).text(linkTitle);
- var dateElement = $("<span></span>").addClass("date").text(linkDate);
+ var dateElement = $("<span></span>").addClass("date").text(linkDate);
$("#photo_sets").append($("<li></li>").append(linkElement).append(dateElement));
}
}
function parseTitle(title) {
- return $.trim(title.split("(")[0]);
+ return $.trim(title.split("(")[0]);
}
function parseDate(title) {
- return " [" + title.split("(")[1].replace(")","") + "]";
+ return " [" + title.split("(")[1].replace(")","") + "]";
}
function buildFlickrFeed(data) {
$("#photo_sets").empty()
$(data.photosets.photoset).each(function() { addLinkToSets(this)} );
+
+ $("#flickr").show();
}
function getSetsList() {
View
28 js/instagram.js
@@ -0,0 +1,28 @@
+function addThumbnail(photo, index, length) {
+ var thumbnailUrl = photo.images.thumbnail.url;
+
+ var linkElement = $("<a></a>").attr("href", photo.link);
+ var imageElement = $("<img></img>").attr("src", thumbnailUrl).addClass("instagram-preview")
+
+ linkElement.append(imageElement);
+ $("#instagram_photos").append(linkElement);
+}
+
+function renderTimeline(response) {
+ $("#instagram_photos").empty();
+
+ var length = response.data.length;
+
+ $(response.data).each(function(index) { addThumbnail(this, index, length)} );
+
+ $("#instagram").show();
+}
+
+function loadRecent() {
+ $.ajax({ url: "https://api.instagram.com/v1/users/708217/media/recent/?access_token=708217.f59def8.d818c3dcb3a1416ea54f1822cdd19ee4&callback=renderTimeline",
+ dataType: 'script' });
+}
+
+$(function () {
+ loadRecent();
+})
View
20 stylesheets/style.css
@@ -8,7 +8,7 @@ body {
body h3 {
font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 100;
- font-size: 35px;
+ font-size: 30px;
}
body a {
@@ -85,4 +85,22 @@ body a {
.github {
background: transparent url("../images/github.ico") no-repeat;
padding-left: 20px;
+}
+
+#instagram_photos {
+ padding-left: 20px;
+}
+
+.instagram-preview {
+ width: 60px;
+ height: 60px;
+ opacity: 0.95;
+}
+
+.instagram-preview:hover {
+ opacity: 1;
+}
+
+.gray {
+ color: #666;
}
Please sign in to comment.
Something went wrong with that request. Please try again.