forked from zurb/flickrbomb
/
demo.html
168 lines (166 loc) · 12 KB
/
demo.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
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>ZURBflickrbomb</title>
<!--============== IMPORT EXTERNAL SHEETS ================== -->
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/flickrbomb.css">
</head>
<body>
<div class="container main-content">
<div class="row">
<div claass="sixteen columns">
<h1>
<img src="images/bomb.png">flickrBomb
</h1>
</div>
</div>
<div class="row">
<div class="sixteen columns">
<div id="demo-splash">
<img src="flickr://Super Meat Boy" width="940px" height="250px"> <span>Loading New Demo Content</span>
</div>
<div id="demo-content">
<img src="flickr://<span id="keywords" spellcheck="false" contenteditable="true">Super Meat Boy</span>" width="940px" height="250px">
</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 flickrBomb 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>
<p><strong>Demo: </strong> Hover over the images below and click the wrench icon <img class="setup-icon-small" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApdJREFUeNpiZGBgYALidCD2BmJpBvqBb0B8Foi7gfgxI5CIB+IChoEDD4A4DOSQ9UCswDCwIAUULRzUMs3b25vnxo0b6v///zfo7e2VIEErFyhEtgOxBKWOyM3NFZo0aZIciH3z5s3vGhoaN0nQnsdEjZAQFhZmhjkCBLZu3foRWd7S0pJz9+7divjMoIpDsrKyhNCiiB+ZP3/+fDkXFxd+fGawUMMhAgICzMh8dXV1TlBUGRgYcFpbW/OA+ITMoIpDPnz48BddDDmqiAFUiZqVK1d+/PPnz398atauXfuO5g5RVVVlY2FhYcQlD8pF6enpT2nqEFCOmTVrFtZo+PLly9++vr4XwHRy5+3bt39pmkaqqqpEpaSk2JDF9uzZ89HV1fU+KeZQVKCByodjx46po4eCsbHxzVu3bv2iW4E2YcIEjNq6q6vrBYmOoCyN1NbWipqZmfGgJ8rm5ubX5JjHRG4CLSsrw4jOxMTER+R6jCyHzJw5U5qHhwelNJ03b97r48ePfyfXISQnVlBVv2XLFhVksWfPnv3S09O7SSiLUjWxYiszysvLn1LgCOKiBpQeQI2cz58/64IaPOhlxqlTp74sWbLkI6XlEQshRxw9elQFV+358+fPf7GxsY8YqACYCCVKfFU4IxBQq5mJ1yHBwcFC+OTZ2NgYw8PD+anhEKLqGlBBBYyiLz9+/PgPbI2J4WsU0cwh6A1hZ2dnXuTowtYoonrUgGpR9NISFDLI/GnTpr2jeYhgq8pBbVB4KZSX94jS8oOsIh5UnoCiBRRdPj4+dyZPnvyOWrmGah0sCgG4iP/LMPDgN8ghJwbYEaDEfwVUBpwDYi0glhkAR4DqqHIgvodcRAsDsRgdHfEHiG/DOAABBgDwy+4qw3JyZwAAAABJRU5ErkJggg=="> to see flickrBomb in action.</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="flickr://broadway" width="100px" height="100px"></li>
<li class="no-caption"><img src="flickr://ballet" width="100px" height="100px"></li>
<li class="no-caption"><img src="flickr://tennis" width="100px" height="100px"></li>
</ul>
</div>
<div style="clear:both"><br></div>
<h3>
1. Set up
</h3>
<p>
Getting flickrBomb 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 flickrBomb 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/flickrbomb.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 flickrBomb. Put flickrBomb at the bottom of your page, right <strong>before the closing body tag</strong> so as to insure that your page is loaded before flickrBomb 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/jquery.flickrBomb.min.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">
<a href="http://zurb.com/playground/flickrbomb/flickrbomb.zip" class="nice button radius large" title="minified version">Download flickrBomb</a><br>
or get it on <a href="https://github.com/zurb/flickrbomb" rel="nofollow">GitHub</a>.
</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 flickrBomb 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>flickr://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">"flickr://Kevin 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="flickr://Kevin 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>
We can choose other related images by clicking on the <img class="setup-icon-small" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApdJREFUeNpiZGBgYALidCD2BmJpBvqBb0B8Foi7gfgxI5CIB+IChoEDD4A4DOSQ9UCswDCwIAUULRzUMs3b25vnxo0b6v///zfo7e2VIEErFyhEtgOxBKWOyM3NFZo0aZIciH3z5s3vGhoaN0nQnsdEjZAQFhZmhjkCBLZu3foRWd7S0pJz9+7divjMoIpDsrKyhNCiiB+ZP3/+fDkXFxd+fGawUMMhAgICzMh8dXV1TlBUGRgYcFpbW/OA+ITMoIpDPnz48BddDDmqiAFUiZqVK1d+/PPnz398atauXfuO5g5RVVVlY2FhYcQlD8pF6enpT2nqEFCOmTVrFtZo+PLly9++vr4XwHRy5+3bt39pmkaqqqpEpaSk2JDF9uzZ89HV1fU+KeZQVKCByodjx46po4eCsbHxzVu3bv2iW4E2YcIEjNq6q6vrBYmOoCyN1NbWipqZmfGgJ8rm5ubX5JjHRG4CLSsrw4jOxMTER+R6jCyHzJw5U5qHhwelNJ03b97r48ePfyfXISQnVlBVv2XLFhVksWfPnv3S09O7SSiLUjWxYiszysvLn1LgCOKiBpQeQI2cz58/64IaPOhlxqlTp74sWbLkI6XlEQshRxw9elQFV+358+fPf7GxsY8YqACYCCVKfFU4IxBQq5mJ1yHBwcFC+OTZ2NgYw8PD+anhEKLqGlBBBYyiLz9+/PgPbI2J4WsU0cwh6A1hZ2dnXuTowtYoonrUgGpR9NISFDLI/GnTpr2jeYhgq8pBbVB4KZSX94jS8oOsIh5UnoCiBRRdPj4+dyZPnvyOWrmGah0sCgG4iP/LMPDgN8ghJwbYEaDEfwVUBpwDYi0glhkAR4DqqHIgvodcRAsDsRgdHfEHiG/DOAABBgDwy+4qw3JyZwAAAABJRU5ErkJggg=="> set up icon and exploring the gallery. When you select an image in the gallery it will automatically be saved to your browsers <a href="http://diveintohtml5.org/storage.html" title="Local Storage" rel="nofollow">local storage</a> so that the next time you come back and visit the page on your machine, your content will persist.
</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><img id="johnstewart" style="width:175px;height:175px" src="flickr://john stewart">
flickrBomb 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>flickr://</span> and searches flickr for the terms that follow. If it finds anything, the image tag is replaced with flickrbomb's <span>flickrbombContainer</span> div. It does this for each images pointing to flickr://.
</p>
<h3>
4. Customization<br>
</h3>
<h5>
Dimensions
</h5>
<p>
Not only can you set the dimensions for your flickrBomb images in the image tag itself, but you can set default dimensions by setting the width and height of the class <span>flickrbomb</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">"flickr://Kevin 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>
Flickr API Key
</h5>
<p>
The demo comes with a flickr API key; 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>66b5c17019403c96779e8fe88d5b576d</span>. The minified version has a variable at the top that you can set called <span>flickrbombAPIkey</span>.</p>
<h3>
5. Download
</h3>
<p>
You can download your copy right here or on <a href="https://github.com/zurb/flickrbomb" title="flickrBomb Github" rel="nofollow">GitHub</a>.
</p><a href="http://zurb.com/playground/flickrbomb/flickrbomb.zip" class="nice button radius large" title="minified version" rel="nofollow">Download flickrBomb</a><br>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/flickrbomb.js"></script>
<script src="js/app.js"></script>
</body>
</html>