Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 158 lines (148 sloc) 6.702 kb
be31b7e @dguzzo initial submit
authored
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
c504625 @dguzzo fixed up some local dev settings. added media queries for iphone
authored
5 <meta name='viewport' content='width=device-width' />
f2cebcc @dguzzo major update
authored
6 <title>Instagram API fun</title>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
7 <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700,400italic|Nova+Round' rel='stylesheet' type='text/css'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
8 <link rel='stylesheet' type='text/css' href='http://www.telecommutetojuryduty.com/styles/external/jquery.qtip.css' />
f2cebcc @dguzzo major update
authored
9 <link rel='stylesheet' type='text/css' href='stylesheets/main.css' />
be31b7e @dguzzo initial submit
authored
10 </head>
11 <body>
e7856a0 @dguzzo some offscreen headers for SEO
authored
12 <h1 class='offLeft'>An Instagram Photo Browser that I built.</h1>
13 <h2 class='offLeft'>Using Instagram's API, jQuery, and some plugins, I use AJAX to display the popular photo feed. You can also sign in via Instagram's secure sign-in, thus letting you view your own feed and photos.</h2>
14 <h3 class='offLeft'>Since it's all done via AJAX, results should be snappy! I had other CSS3 features besides reflections turned on, but even Chrome 18 will have weird rendering issues when too many transforms are combined. Will re-try soon!</h3>
4499248 @dguzzo added qtip. lots of UI changes.
authored
15 <header id='navHeader'>
6802956 @dguzzo added some nav tooltips.
authored
16 <a id="feed" class='topNav' href='#' title='show your own Instagram feed'>your feed</a>
17 <a id="popular" class='topNav' href='#' title='show current popular photos on Instagram'>popular</a>
18 <a id="self" class='topNav' href='#' title="show the photos you've posted to Instagram">your photos</a>
19 <div id="logout" title="logout from your Instagram account. you'll have to login again to view certain feeds on this page.">logout</div>
f2cebcc @dguzzo major update
authored
20 </header>
21
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
22 <div id="todo">
23 <ul>
977aeb8 @dguzzo updated ajax loader to work more like flickr_masonry site
authored
24 <li>redirect (at least from localhost) to get access token doesn't highlight proper nav tab</li>
4499248 @dguzzo added qtip. lots of UI changes.
authored
25 <li></li>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
26 </ul>
27 </div>
28
977aeb8 @dguzzo updated ajax loader to work more like flickr_masonry site
authored
29
30 <div id="ajaxLoader">
31 <img src='http://www.telecommutetojuryduty.com/images/ajax_loader_76.gif' width=76 height=76>
32 </div>
33
f2cebcc @dguzzo major update
authored
34 <ul id='pics'></ul>
2ca2c7c @dguzzo added ajax spinner. added timeout retry for reflections plugin if it …
authored
35 <div id="return_top" class="hover_pointer bevel_border"><a href="#"><span id="return_arrow">⇪</span><div id="return_top_label">Back to Top</div></a></div>
5371510 @dguzzo added "back to top" button. some minor ui changes.
authored
36
be31b7e @dguzzo initial submit
authored
37 <script id="picTemplate" type="text/x-jquery-tmpl">
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
38 <li class='imageCluster'>
39 <header class='group'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
40 <div class='avatarContainer'>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
41 {{if user.website }}
6802956 @dguzzo added some nav tooltips.
authored
42 <a href='${user.website}' target='_blank' class='userWebsite' title="click to view ${user.username}'s website">
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
43 {{/if}}
f2cebcc @dguzzo major update
authored
44 {{if user.profile_picture}}
4499248 @dguzzo added qtip. lots of UI changes.
authored
45 <div class = 'userImageContainer' style='background-image: url(${user.profile_picture});'>
46 <!-- <img class='userImage' src='${user.profile_picture}' width =150 height=150> -->
47 </div>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
48 {{/if}}
49 {{if user.website }}
4499248 @dguzzo added qtip. lots of UI changes.
authored
50 </a>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
51 {{/if}}
4499248 @dguzzo added qtip. lots of UI changes.
authored
52 </div>
53
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
54 {{if user.website }}
6802956 @dguzzo added some nav tooltips.
authored
55 <a href='${user.website}' target='_blank' class='userWebsite' title="click to view ${user.username}'s website">
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
56 {{/if}}
57 <h3 class='username'>${user.username} {{if user.full_name }} (${user.full_name}) {{/if}}</h3>
58 {{if user.website }}
59 </a>
f2cebcc @dguzzo major update
authored
60 {{/if}}
61 </header>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
62 <div class='imageLineup'>
63 <span class='mainImage thumb'>
64 <a target='_blank' href='${link}'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
65 <img src='${images.thumbnail.url}' width='${images.thumbnail.width}' height='${images.thumbnail.height}'>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
66 </a>
67 </span>
f2cebcc @dguzzo major update
authored
68 <span class='mainImage lowRes'>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
69 <a target='_blank' href='${link}'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
70 <img src='${images.low_resolution.url}' width='${images.low_resolution.width}' height='${images.low_resolution.height}' >
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
71 </a>
f2cebcc @dguzzo major update
authored
72 </span>
73 <span class='mainImage standardRes'>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
74 <a target='_blank' href='${link}'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
75 <img src='${images.standard_resolution.url}' width='${images.standard_resolution.width}' height='${images.standard_resolution.height}'>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
76 </a>
f2cebcc @dguzzo major update
authored
77 </span>
78 </div>
b5c18ba @dguzzo redid auth flow. added some nice css transforms
authored
79 {{if caption}}
80 <div class='caption'>${caption.text}</div>
81 {{/if}}
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
82 <div class='detailsContainer'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
83 <div class='photoDetails filter'>Filter used: ${filter}</div>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
84 </div>
f2cebcc @dguzzo major update
authored
85 </li>
86 </script>
87
88 <script id="picTemplateReverse" type="text/x-jquery-tmpl">
4499248 @dguzzo added qtip. lots of UI changes.
authored
89 <li class='imageCluster imageClusterReverse'>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
90 <header class='group'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
91 <div class='avatarContainer'>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
92 {{if user.website }}
6802956 @dguzzo added some nav tooltips.
authored
93 <a href='${user.website}' target='_blank' class='userWebsite' title="click to view ${user.username}'s website">
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
94 {{/if}}
f2cebcc @dguzzo major update
authored
95 {{if user.profile_picture}}
4499248 @dguzzo added qtip. lots of UI changes.
authored
96 <div class = 'userImageContainer' style='background-image: url(${user.profile_picture});'>
97 <!-- <img class='userImage' src='${user.profile_picture}' width =150 height=150> -->
98 </div>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
99 {{/if}}
100 {{if user.website }}
4499248 @dguzzo added qtip. lots of UI changes.
authored
101 </a>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
102 {{/if}}
4499248 @dguzzo added qtip. lots of UI changes.
authored
103 </div>
104
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
105 {{if user.website }}
6802956 @dguzzo added some nav tooltips.
authored
106 <a href='${user.website}' target='_blank' class='userWebsite' title="click to view ${user.username}'s website">
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
107 {{/if}}
108 <h3 class='username'>${user.username} {{if user.full_name }} (${user.full_name}) {{/if}}</h3>
109 {{if user.website }}
110 </a>
f2cebcc @dguzzo major update
authored
111 {{/if}}
112 </header>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
113 <div class='imageLineup reverse'>
f2cebcc @dguzzo major update
authored
114 <span class='mainImage standardRes'>
115 <a target='_blank' href='${link}'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
116 <img src='${images.standard_resolution.url}' width='${images.standard_resolution.width}' height='${images.standard_resolution.height}'>
f2cebcc @dguzzo major update
authored
117 </a>
118 </span>
119 <span class='mainImage lowRes'>
120 <a target='_blank' href='${link}'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
121 <img src='${images.low_resolution.url}' width='${images.low_resolution.width}' height='${images.low_resolution.height}' >
f2cebcc @dguzzo major update
authored
122 </a>
123 </span>
124 <span class='mainImage thumb'>
125 <a target='_blank' href='${link}'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
126 <img src='${images.thumbnail.url}' width='${images.thumbnail.width}' height='${images.thumbnail.height}'>
f2cebcc @dguzzo major update
authored
127 </a>
128 </span>
129 </div>
b5c18ba @dguzzo redid auth flow. added some nice css transforms
authored
130 {{if caption}}
131 <div class='caption'>${caption.text}</div>
132 {{/if}}
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
133 <div class='detailsContainer'>
4499248 @dguzzo added qtip. lots of UI changes.
authored
134 <div class='photoDetails filter'>Filter used: ${filter}</div>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
135 </div>
f2cebcc @dguzzo major update
authored
136 </li>
be31b7e @dguzzo initial submit
authored
137 </script>
138
17383f7 @dguzzo minor ui changes.
authored
139 <script type="text/javascript">
140 var _gaq = _gaq || [];
141 _gaq.push(['_setAccount', 'UA-25733533-1']);
142 _gaq.push(['_trackPageview']);
143
144 (function() {
145 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
146 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
147 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
148 })();
149 </script>
4499248 @dguzzo added qtip. lots of UI changes.
authored
150 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
be31b7e @dguzzo initial submit
authored
151 <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
b5c18ba @dguzzo redid auth flow. added some nice css transforms
authored
152 <script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
4499248 @dguzzo added qtip. lots of UI changes.
authored
153 <script src="http://www.telecommutetojuryduty.com/scripts/external/jquery.qtip.js"></script>
5371510 @dguzzo added "back to top" button. some minor ui changes.
authored
154 <script src="http://open-cooliris.googlecode.com/svn-history/r2/trunk/fancy/jquery.easing.1.3.js"></script>
17383f7 @dguzzo minor ui changes.
authored
155 <script src="/scripts/tele_utils.js"></script>
b3bb637 @dguzzo fleshing out the design, improving the UI
authored
156 <script src="javascripts/instagram_test.js"></script>
be31b7e @dguzzo initial submit
authored
157 </body>
158 </html>
Something went wrong with that request. Please try again.