-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
203 lines (189 loc) · 13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>InstagramBomb</title>
<!--============== IMPORT EXTERNAL SHEETS ================== -->
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/instagramBomb.css">
</head>
<body>
<div class="container main-content">
<div class="row">
<div class="sixteen columns">
<h1>
<img src="images/bomb.png">InstagramBomb
</h1>
</div>
</div>
<div class="row">
<div class="sixteen columns">
<div id="demo-splash">
<img src="instagram://Kitten" width="612px" height="612px"> <span>Loading New Demo Content</span>
</div>
<div id="demo-content">
<img src="instagram://<span id="keywords" spellcheck="false" contenteditable="true">Kitten</span>" width="612px" height="612px">
</div>
<div id="demo-body">
<h2>
Build super awesome sites quickly, with super awesome images
</h2>
</div>
</div>
<div class="row">
<div class="nine columns">
<p class="lead-in">
Duck! Whew, that bomber almost got you. Lucky for you, you lived.
</p>
<p>
Hopefully you had a chance to play around with the demo above and realized that instagramBomb provides an easy way for you to fill your prototypes with relevant content, and not just dull gray placeholder images. It's quick and easy, so let's dive in!
</p>
<div class="old-vs-new">
<ul>
<li class="old-method first"><h5>The old way</h5><img src="images/old.gif"></li>
<li><h5>The new way</h5><img src="instagram://balloons" width="100px" height="100px"></li>
<li class="no-caption"><img src="instagram://dance" width="100px" height="100px"></li>
<li class="no-caption"><img src="instagram://tennis" width="100px" height="100px"></li>
</ul>
</div>
<div style="clear:both"><br></div>
<h3>
1. Set up
</h3>
<p>
Getting instagramBomb to work on your pages is super simple. Make sure jQuery is loaded into your pages, preferably at the bottom.
</p>
<div class="highlight" style="background: #202020">
<pre><span style="color: #6ab825; font-weight: normal"><script </span><span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"//code.jquery.com/jquery.min.js"</span><span style="color: #6ab825; font-weight: normal">></script></span></pre>
</div><br>
<p>
We recommend using a CDN to host your jQuery for development environments, there are many: <a href="http://code.google.com/apis/libraries/devguide.html#jquery" title="Google Libraries API" rel="nofollow">Google</a>, <a href="http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery" title="jQuery's CDN" rel="nofollow">jQuery</a>, or <a href="http://www.asp.net/ajaxlibrary/CDN.ashx#jQuery_Releases_on_the_CDN_0" title="Microsoft's CDN" rel="nofollow">Microsoft</a> are all reasonable solutions. However, for live sites, it is best to switch out the CDN with a local copy.
</p>
<p>
Next up is to put the instagramBomb css file in the head section of your page.
</p>
<div class="highlight" style="background: #202020">
<pre><span style="color: #6ab825; font-weight: normal"><link</span> <span style="color: #bbbbbb">rel=</span><span style="color: #ed9d13">"stylesheet"</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"css/instagramBomb.css"</span><span style="color: #6ab825; font-weight: normal">></span></pre>
</div><br>
<p>
After including jQuery and the css in the head of your page, all that is left is to include instagramBomb. Put instagramBomb at the bottom of your page, right <strong>before the closing body tag</strong> so as to insure that your page is loaded before instagramBomb is called.
</p>
<div class="highlight" style="background: #202020">
<pre><span style="color: #6ab825; font-weight: normal"><script </span><span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"js/instagramBomb.js"</span><span style="color: #6ab825; font-weight: normal">></script></span></pre>
</div><br>
<p>
That's all you have to do for set up!
</p>
</div>
<div class="six columns bomber">
</div>
</div>
</div>
</div><!-- container -->
<div class="all-black">
<div class="art-style"></div>
<div class="container">
<div class="row">
<div class="sixteen columns">
<h3 class="first">
2. Implementing
</h3>
<p>
Using instagramBomb in your prototypes is really quite simple. Let's say you're building a website for one of your clients who happens to be building a Kevin Bacon fan site. All you have to do is drop an image tag into your layout and set the source to <span>instagram://Kevin Bacon</span>, then set the desired dimensions.
</p>
<div class="highlight" style="background: #202020">
<pre><span style="color: #6ab825; font-weight: normal"><img</span> <span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"instagram://Bacon"</span> <span style="color: #bbbbbb">width=</span><span style="color: #ed9d13">"175px"</span> <span style="color: #bbbbbb">height=</span><span style="color: #ed9d13">"175px"</span><span style="color: #6ab825; font-weight: normal">></span></pre>
</div><br>
<div class="row">
<div class="three columns">
<img src="instagram://Bacon" width="175px" height="175px">
</div>
<div class="twelve columns offset-by-one-half">
<p>
In return, we get a picture that matches the keywords in the source url.
</p>
<p>
If you change the search terms in your image source URL, then your local storage for that image is replaced.
</p>
</div>
<div style="clear:both"></div>
<h3>
3. How it works
</h3>
<p>
instagramBomb uses <a href="http://jquery.com" title="jQuery" rel="nofollow">jQuery</a>, <a href="http://documentcloud.github.com/underscore/" title="Underscore.js" rel="nofollow">Underscore.js</a>, <a href="http://documentcloud.github.com/backbone/" title="Backbone.js" rel="nofollow">Backbone.js</a>, and your browsers <a href="http://documentcloud.github.com/backbone/docs/backbone-localstorage.html" title="Backbone.js Local Storage Adapter" rel="nofollow">local storage</a> to make the magic happen. The plugin scours your html and finds all the image tags that have a source attribute that starts with <span>instagram://</span> and searches flickr for the terms that follow. If it finds anything, the image tag is replaced with instagramBomb's <span>instagramBombContainer</span> div. It does this for each images pointing to instagram://.
</p>
<h3>
4. Customization<br>
</h3>
<h5>
Dimensions
</h5>
<p>
Not only can you set the dimensions for your instagramBomb images in the image tag itself, but you can set default dimensions by setting the width and height of the class <span>instagramBomb</span>. For images without inline dimensions defined, the pluging will use those set in css.
</p>
<h5>
Different images, same search term
</h5>
<p>
To use the same search term and have different images for each, you need to assign each image a unique id.
</p>
<div class="highlight" style="background: #202020">
<pre><span style="color: #6ab825; font-weight: normal"><img</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"kevin-bacon-rocking"</span> <span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"instagram://Bacon"</span> <span style="color: #bbbbbb">width=</span><span style="color: #ed9d13">"175px"</span> <span style="color: #bbbbbb">height=</span><span style="color: #ed9d13">"175px"</span><span style="color: #6ab825; font-weight: normal">></span></pre>
</div>
</div><br>
<h5>
Instagram API Token
</h5>
<p>
The demo comes with a Instagram API Token; however, if you are going to be using the plugin heavily, we ask that you include your own API key. In the uncompressed version you can find it by searching for <span>428917604.1fb234f.2c55da4137c5424bbe2845a7c22dfd43</span>.</p>
<h3>
5. Download
</h3>
<p>
You can download your copy right here or on <a href="https://github.com/PapyDanone/instagramBomb" title="instagramBomb Github" rel="nofollow">GitHub</a>.
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.0/backbone.localStorage-min.js"></script>
<script src="js/instagramBomb.js"></script>
<script>
var currentValue = false,
el = $('#demo-content span');
el.focus(function(){
currentValue = $(this).text();
});
el.keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
e.target.blur();
updateIMG($(this));
}
});
el.focusout(function() {
updateIMG($(this));
});
function updateIMG(argu) {
if (argu.text() !== currentValue) {
var keywords = $('#keywords').text();
$('#demo-splash').html('<img src="instagram://' + keywords + '" width="940px" height="250px" style="display:none"><span>Loading New Demo Content</span>');
bomb();
} else {
return false;
}
}
bomb();
</script>
</body>
</html>