flickrBomb

Loading New Demo Content
<img src="flickr://Super Meat Boy" width="940px" height="250px">

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.

  • The old way
  • The new way

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="//code.jquery.com/jquery.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.

<script src="js/jquery.flickrBomb.min.js"></script>

That's all you have to do for set up!

Download flickrBomb
or get it on GitHub.