flickrBomb

<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 Setupicon 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!

Bomber

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 flickrBomb

Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×