flickrBomb
Build super awesome sites quickly, with super awesome images
Duck! Whew, that bomber almost got you. Lucky for you, you lived.
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!
Demo: Hover over the images below and click the wrench icon 
to see flickrBomb in action.
1. Set up
Getting flickrBomb to work on your pages is super simple. Make sure jQuery is loaded into your pages, preferably at the bottom.
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
We recommend using a CDN to host your jQuery for development environments, there are many: Google, jQuery, or Microsoft are all reasonable solutions. However, for live sites, it is best to switch out the CDN with a local copy.
Next up is to put the flickrBomb css file in the head section of your page.
<link rel="stylesheet" href="css/flickrbomb.css">
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 before the closing body tag so as to insure that your page is loaded before flickrBomb is called.
That's all you have to do for set up!
2. Implementing
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 flickr://Kevin Bacon, then set the desired dimensions.
<img src="flickr://Kevin Bacon" width="175px" height="175px">
In return, we get a picture that matches the keywords in the source url.
We can choose other related images by clicking on the set up icon and exploring the gallery. When you select an image in the gallery it will automatically be saved to your browsers local storage so that the next time you come back and visit the page on your machine, your content will persist.
If you change the keywords in your source url, then your local storage is replaced for that image with the new content.
3. How it works
flickrBomb uses jQuery, Underscore.js, Backbone.js, and your browsers local storage to make the magic happen. The plugin scours your html and finds all the image tags that have a source attribute that starts with flickr:// and searches flickr for the terms that follow. If it finds anything, the image tag is replaced with flickrbomb's flickrbombContainer div. It does this for each images pointing to flickr://.
Browser Support: Tested in Internet Explorer 8+, Firefox 3.5+, Safari 4+, Chrome 10+, Android 2.1+, and iOS 4+
4. Customization
Dimensions
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 flickrbomb. For images without inline dimensions defined, the plugin will use those set in css.
You can also define dimensions by setting a data-ratio attribute to the desired aspect ratio. This will constrain the longest dimension to the size of the images container.
<img src="flickr://Kevin Bacon" data-ratio="4:3">
The width and height of the image can also be set by using the style attribute.
<img src="flickr://Kevin Bacon" style="width: 175px; height: 175px" >
Different images, same search term
To use the same search term and have different images for each, you need to assign each image a unique id.
<img id="kevin-bacon-rocking" src="flickr://Kevin Bacon" width="175px" height="175px">
Flickr API Key
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 66b5c17019403c96779e8fe88d5b576d. The minified version has a variable at the top that you can set called flickrbombAPIkey.
5. Download
You can download your copy right here or on GitHub.
Download flickrBombCheck out other Playground experiments
Foundation CSS Grid Examples
Foundation CSS Grid + Container Queries
Foundation Grids within Grids
Foundation for Apps
