How to use

To use the plugin simply instantiate MooFlick and give it the id of the target container (usually a div) and your flickr id.

HTML target div

<div id="flickr-items"></div>

Basic CSS styling, you can update this how you like

#flickr-items   {
    width:250px;
    margin:15px auto;
    height:400px;  /* Only for demo purposes - you can remove this*/
}
#flickr-items div {
    margin:10px auto;
    line-height:110px;
}
#flickr-items div.even  {
    float:left;
    clear:left;
}
#flickr-items div.odd   {
    float:right;
    clear:right;
}

Instantiate the MooFlick class to fetch the images asynchronously

window.addEvent('domready', function(){
    var mf = new MooFlick('flickr-items','10901345@N05', {});
})

The above assumes the target area has an id of flickr-items. For working examples check out the demo!

Thats all!

Syntax

new MooFlick($('target), 'flickr_user_id', [options])

Arguments

1. Element - (element) The DMO element where the flickr images will be placed
2. Flickr user id - (int) The user id for which you will display the latest images

Options

• num : (int) [default = 6] The number of images to display (min 1 max 20)
• url : (string) [default = current] The url of the flickr API (incase they ever change!)
• delay : (int) [default = 350] The delay between adding each image to the page (in microseconds, 0 for no delay)
• max_rotation : (int) [default = 8] The maximum rotation, setting rotation = 20 would given 40 degress of possible rotation (-20 to 20 degrees)
• size_reduction : (decimal) [default = 0.4] The scale down factor, set to 1 for no scaling, 0.4 = 40% of original size

Known Issues

Image rotation is only visible in the browsers that support it (IE does NOT support it)

The plugin has been tested in Safari, Firefox, Chrome and IE (7 and 8).

Any feedback greatly appreciated!

Screenshots

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.