Your Flickr photos.
Fast and beautiful.

Display your photos on your website with this pure javascript widget.

Beautiful animations. Pure CSS3.

With a wide variety of gorgeous animations, you can make your photos as subtle or as vibrant a presence on your website as you like. Give them a try...

Only 5K,
2K gzipped. It's fast!

By not requiring a heavy javascript library like JQuery (91K) or Prototype (91K), you can drastically reduce page load times.

Wordpress Plugin. Easy!

Adding your Flickr photos to your Wordpress sidebar could not be easier with the Javascript Flickr Badge Wordpress widget. All the settings are configurable in your blog's admin. Simply download and install the plugin into /wp-admin/plugins, activate it, and drag the widget to your Wordpress sidebar.

You can add spacing between the photos by adding a #jsFlickrBadge a { margin: 5px; } style to your theme's CSS.

Cross Browser Support

	Chrome	Firefox	Opera	Safari	Internet Explorer
No Animation	ALL	ALL	ALL	ALL	ALL
Vertical Scroll	4.0+	4.0+	10.5+	3.1+	10.0+
Shuffle	4.0+	4.0+	10.5+	3.1+	10.0+
Zoom	4.0+	4.0+	10.5+	3.1+	10.0+
Flip Vertical	12.0+	10.0+	NO	4.0+	10.0+
Flip Horizontal	12.0+	10.0+	NO	4.0+	10.0+

Configuration

You must provide a Flickr ID (find yours here) and select a type of photo stream to display. Below is a description of the available feeds.

user	public photos from your user photostream
contacts	public photos, one per contact, of your contacts
contactsAll	public photos, many per contact, of contacts
friends	public photos, one per contact, of your contacts marked as "friend"
friendsAll	public photos, many per contact, of contacts marked as "friend"
favorites	public photos you have marked as "favorite"
group	public photos from a group (use group id for Flickr ID)

Non-Wordpress Installation

Calling the Javascript Flickr Badge from any web page is easy. You can rename myElement to whatever you wish.

CSS:

#myElement a {
  margin: 5px; // optional margin value (may be different for each side)
}

HTML:

<div id="myElement"></div>
<script type="text/javascript" src="javascript-flickr-badge.min.js"></script>
<script type="text/javascript">
  jsFlickrBadge(document.getElementById('myElement'), {
      // your Flickr ID (find it here)
      flickrId: '23585397@N00',
      // feed type. user, group, contacts, etc.
      feed: 'user',
      // optional comma-delimited tags to filter by, only used with 'user' feed
      tags: 'badge,awesome',
      // number of rows to display
      rows: 4,
      // number of columns to display
      columns: 4,
      // size of each thumbnail (any bigger than 75 will cause pixelization)
      size: 75,
      // animation to use.
      // one of: vscroll, random, vscroll, shuffle, zoom, scroll, flipX, flipY
      animation: 'vscroll',
      // seconds each animation takes
      animationSpeed: 1,
      // seconds between each animation
      animationPause: 2
    });
</script>

That's it! You're done.

Javascript Flickr Badge

Your Flickr photos. Fast and beautiful.